/* ---- root font-size anchor (D13, 06 §8.5) — NEVER a px lock ---- */ html { font-size: 100%; } :root { /* Fonts (D14) */ --font-ui: 'Outfit Variable', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'SF Mono', monospace; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-heavy: 800; --line-tight: 1.2; --line-snug: 1.3; --line-normal: 1.5; --line-relaxed: 1.7; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; /* User text-size multiplier (mode-invariant; the application layer sets `data-text-size` on — see the presets below tokens.css's main block). Default is 1 (unset attribute). Every --font-size-* below is wrapped in calc( * var(--type-scale)) so resolved values are byte-identical to the previous literals at scale 1. */ --type-scale: 1; /* Type scale — rem (D-type) */ --font-size-xs: calc(0.64rem * var(--type-scale)); --font-size-sm: calc(0.8rem * var(--type-scale)); --font-size-base: calc(1rem * var(--type-scale)); --font-size-lg: calc(1.25rem * var(--type-scale)); --font-size-xl: calc(1.563rem * var(--type-scale)); --font-size-xxl: calc(1.953rem * var(--type-scale)); --font-size-display: calc(2.441rem * var(--type-scale)); /* Spacing — 4px base → rem */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 2rem; --space-8: 2.5rem; --space-9: 3.5rem; --space-10: 4.5rem; /* Sizing */ --icon-sm: 1rem; --icon-md: 1.25rem; --icon-lg: 1.5rem; --icon-xl: 2rem; --control-sm: 2rem; --control-md: 2.75rem; --control-lg: 3rem; /* Radius */ --radius-none: 0; --radius-sm: 0.625rem; --radius-md: 1rem; --radius-lg: 1.5rem; --radius-xl: 2rem; --radius-pill: 999px; /* Container (D11) */ --container-prose: 40rem; --container-sm: 30rem; --container-md: 48rem; --container-lg: 64rem; --container-xl: 80rem; /* Motion (D12/D13) */ --dur-0: 0ms; --dur-fast: 150ms; --dur-base: 240ms; --dur-slow: 360ms; --dur-sheet: 500ms; /* v126 sheet slide (.5s) */ --dur-panel: 500ms; --dur-breathe: 4s; --ease: cubic-bezier(0.32, 0.72, 0.26, 1); --pop: cubic-bezier(0.34, 1.56, 0.64, 1); --breathe: cubic-bezier(0.37, 0, 0.63, 1); /* Stacking — 10 layers (D9) */ --z-content: 1; --z-tabbar: 35; --z-fab: 36; --z-chrome: 40; --z-panel: 44; --z-scrim: 50; --z-sheet: 60; --z-overlay: 70; --z-toast: 80; --z-portal: 400; /* ---- Cool Zen light = the default theme (mirrors coolZenLight, D7) ---- */ --color-surface-page: #edf1ee; --color-surface-raised: #ffffff; --color-surface-sunken: #e2e9e6; /* NEW: "cream" raised-soft surface, between page and raised (e.g. subtly-elevated cards). */ --color-surface-soft: #f7faf8; --color-surface-glass: color-mix(in srgb, var(--color-surface-raised) 72%, transparent); /* NEW: a fixed near-black anchor for scrims that must read as "dimmed" in BOTH light and dark app modes (e.g. `Modal`'s opt-in `ModalScrim.Dark`) — deliberately NOT re-declared in the dark-mode block below, so it stays the same literal in both modes (unlike every mode-varying `--color-surface-*` token above/below it). */ --color-scrim-anchor: #0b1110; --color-text-primary: #2a3733; --color-text-muted: #5f706b; --color-text-subtle: #93a29c; --color-text-on-accent: #fbfefd; --color-border-default: #d6e0db; --color-border-strong: #c3d1cb; --color-border-focus: #4e869e; --color-accent-default: #4e869e; /* NEW: a deeper accent for text/icons needing more contrast than --color-accent-default on light surfaces. Do NOT rewire --color-accent-hover to this (zero visual-change rule) — later component work consumes -deep directly. */ --color-accent-deep: #3a6b80; --color-accent-soft: #dceaf0; /* Status aliases: danger/success repoint to the matching family's -deep member below (dark mode re-tints them for free). Their resolved light values are unchanged: #a06669 / #5c7a69. info stays a LITERAL in both modes: sky-deep is #4e869e (light) which does NOT match the pre-existing --color-status-info literal #467a90 — repointing would be a visual change, so info is intentionally NOT part of the family system. See dark block for its dark literal. */ --color-status-danger: var(--color-rose-deep); --color-status-success: var(--color-sage-deep); --color-status-warning: #9a7f4a; --color-status-info: #467a90; /* ---- Color families (NEW): semantic tint sets consumed directly by components. sage=success/go · sky=info · rose=warn/error · stone=neutral · gold=crown/highlight. Each has a base, a -deep (more emphasis) and (except gold's warn-adjacent use / stone, see below) a -soft (tinted background) variant. */ --color-sage: #7e9c8b; --color-sage-deep: #5c7a69; --color-sage-soft: #e0eae3; --color-sky: #86b4c9; --color-sky-deep: #4e869e; --color-sky-soft: #dceaf0; --color-rose: #c58e92; --color-rose-deep: #a06669; --color-rose-soft: #f0e1e2; --color-stone: #9aa7a2; --color-stone-soft: #e6ebe8; --color-gold: #9fb089; --color-gold-soft: #e6ebdd; /* Elevation (theme-variant) */ --shadow: 0 1px 2px rgba(42, 55, 51, 0.04), 0 10px 30px -12px rgba(42, 70, 62, 0.16); --shadow-lg: 0 2px 4px rgba(42, 55, 51, 0.06), 0 24px 60px -16px rgba(42, 70, 62, 0.22); --halo-soft: 0 0 0 4px color-mix(in srgb, var(--color-accent-default) 22%, transparent); /* Derived interaction-state vars (D8) — not stored per theme */ --color-accent-hover: color-mix(in srgb, var(--color-accent-default) 88%, #000); --color-accent-pressed: color-mix(in srgb, var(--color-accent-default) 78%, #000); --color-accent-disabled: color-mix( in srgb, var(--color-accent-default) 40%, var(--color-surface-page) ); --color-surface-raised-hover: color-mix(in srgb, var(--color-surface-raised) 96%, #000); } /* ---- Cool Zen dark (NEW). The application layer sets `data-mode="dark"` on — this block only responds to it; the attribute is wired in a later project. Emphasis INVERTS in dark: every `-deep` family member is LIGHTER than its base (opposite of light mode), which is why the derived accent-hover/-pressed color-mixes below are also overridden to mix toward #fff instead of #000. ---- */ :root[data-mode='dark'] { --color-surface-page: #16211f; --color-surface-sunken: #101a19; --color-surface-soft: #1e2b29; --color-surface-raised: #243331; --color-text-primary: #e6efeb; --color-text-muted: #a6b6b0; --color-text-subtle: #6f837c; --color-border-default: #2c3d3a; --color-border-strong: #3a4e4a; --color-accent-default: #7fb3cb; --color-accent-deep: #a4d0e2; --color-accent-soft: #1c2e34; --color-text-on-accent: #0e1817; --color-border-focus: #7fb3cb; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 34px -14px rgba(0, 0, 0, 0.5); --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.4), 0 30px 64px -26px rgba(0, 0, 0, 0.7); /* Glass derives from surface-SOFT in dark (not -raised, unlike light mode's glass). */ --color-surface-glass: color-mix(in srgb, var(--color-surface-soft) 74%, transparent); /* Color families — dark. sky IS the dark accent family (not a typo: sky is the "info" hue and the dark accent hue are the same blue in this palette). */ --color-sage: #8fb3a0; --color-sage-deep: #a7c7b6; --color-sage-soft: #21302c; --color-sky: #7fb3cb; --color-sky-deep: #a4d0e2; --color-sky-soft: #1c2e34; --color-rose: #c99195; --color-rose-deep: #e2b0b3; --color-rose-soft: #332425; --color-stone: #7e8e89; --color-stone-soft: #26332f; --color-gold: #a7b58c; --color-gold-soft: #2a2f1e; /* Status aliases: danger/success keep repointing to the family (re-tinted automatically via cascade). info stays a literal in dark too, mirroring the light-mode mismatch note above. */ --color-status-warning: #c9ae7e; /* no reference family; derived via the same lighten-in-dark rule */ --color-status-info: #7fb3cb; /* Derived interaction-state vars — dark override: emphasis inverts, so hover/pressed must mix toward #fff (not #000 as in light) at the same percentages. Disabled continues to mix toward --color-surface-page, which resolves to the DARK surface-page here via cascade (no hardcoded light literal). --halo-soft is left as-is (inherited formula, sane with the dark accent). */ --color-accent-hover: color-mix(in srgb, var(--color-accent-default) 88%, #fff); --color-accent-pressed: color-mix(in srgb, var(--color-accent-default) 78%, #fff); } /* ---- Font-family swap (D14) ---- */ [data-app-font='system'] { --font-ui: system-ui, -apple-system, sans-serif; } [data-app-font='rounded'] { --font-ui: 'Nunito Variable', 'Outfit Variable', system-ui, sans-serif; } /* ---- Text-size presets (NEW). The application layer sets `data-text-size` on — this block only responds to it. Default/unset = --type-scale: 1 (declared in :root above); these presets override it. Mode-invariant (applies identically in light and dark). ---- */ [data-text-size='small'] { --type-scale: 0.9; } [data-text-size='large'] { --type-scale: 1.14; } [data-text-size='xlarge'] { --type-scale: 1.3; } /* ---- Reduced motion — ONE central collapse (D13, 06 §8.4) ---- */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: var(--dur-0); --dur-base: var(--dur-0); --dur-slow: var(--dur-0); --dur-sheet: var(--dur-0); --dur-panel: var(--dur-0); --dur-breathe: var(--dur-0); --pop: linear; } } /* ===================================================================== LANDING (marketing) — bespoke "golden hour → neon night" dark theme. These are LANDING-SCOPED tokens (not appearance-varying): the public `/` page always renders this cinematic dark look regardless of any Looper's saved palette/mode, and the real light `LoopCard`s stay white ON the dark hero (they read the appearance surface tokens, not these). Consumed only by `apps/web/src/Landing.module.css`. Raw hex/rgba are allowed here — this file is the design-system token source (stylelint override). Named as a family so it doubles as the reference for a future selectable app theme. ===================================================================== */ :root { --color-landing-ground: #17101d; --color-landing-ground-2: #241631; --color-landing-ink-deep: #0f0a15; --color-landing-cream: #f6ede1; --color-landing-cream-muted: #b9a9be; --color-landing-coral: #f2643c; --color-landing-coral-deep: #ec5730; --color-landing-gold: #f2a93b; --color-landing-teal: #1fb2a6; --color-landing-plum: #9a63c4; --color-landing-rose: #e35d84; --color-landing-line: rgba(255, 255, 255, 0.12); --color-landing-line-soft: rgba(255, 255, 255, 0.06); --color-landing-glass: rgba(255, 255, 255, 0.08); --shadow-landing-card: 0 1px 2px rgba(8, 14, 11, 0.4), 0 30px 62px -24px rgba(8, 14, 11, 0.72); } /* ===================================================================== PALETTE THEMES (v126 verbatim). Cool Zen is the base above (`:root`); these six re-declare only COLOR tokens per `[data-theme]`, with a matching `[data-theme][data-mode='dark']` block. Theme × mode are orthogonal (each block sets only its own axis). Typography stays Outfit for every theme (v126's "one calm type system"). Accent tracks each theme's deep sky. Placed after the base blocks so source order wins. ===================================================================== */ /* ---- Warm Clay ---- */ :root[data-theme='clay'] { --color-surface-page: #f4ece2; --color-surface-sunken: #ebe0d2; --color-surface-soft: #fcf7f0; --color-surface-raised: #fffdfa; --color-text-primary: #3a2c22; --color-text-muted: #776356; --color-text-subtle: #a99685; --color-border-default: #e4d7c7; --color-border-strong: #d6c4b0; --color-border-focus: #a85638; --color-accent-default: #a85638; --color-accent-deep: #a85638; --color-accent-soft: #f4e0d2; --color-sage: #c77a4e; --color-sage-deep: #b25c36; --color-sage-soft: #f3e1d2; --color-sky: #c98b6a; --color-sky-deep: #a85638; --color-sky-soft: #f4e0d2; --color-stone: #a6917d; --color-stone-soft: #ede2d4; --color-rose: #be6b5c; --color-rose-soft: #f4ded8; --color-rose-deep: #9e4b3e; --color-text-on-accent: #fff9f3; } :root[data-theme='clay'][data-mode='dark'] { --color-surface-page: #241a14; --color-surface-sunken: #1a120d; --color-surface-soft: #30241c; --color-surface-raised: #3a2c22; --color-text-primary: #f2e6d8; --color-text-muted: #c2ac99; --color-text-subtle: #8b7561; --color-border-default: #3e2f25; --color-border-strong: #4f3c2f; --color-border-focus: #efa476; --color-accent-default: #efa476; --color-accent-deep: #efa476; --color-accent-soft: #37231a; --color-sage: #dc9468; --color-sage-deep: #e8a878; --color-sage-soft: #3a2418; --color-sky: #d88e66; --color-sky-deep: #efa476; --color-sky-soft: #37231a; --color-stone: #977f6b; --color-stone-soft: #312419; --color-rose: #d08574; --color-rose-soft: #3a211b; --color-rose-deep: #eaa593; --color-text-on-accent: #1e1410; } /* ---- Nocturne Blue ---- */ :root[data-theme='nocturne'] { --color-surface-page: #eef1f6; --color-surface-sunken: #e2e7f0; --color-surface-soft: #f8fafd; --color-surface-raised: #ffffff; --color-text-primary: #161b2e; --color-text-muted: #525b73; --color-text-subtle: #8a93a8; --color-border-default: #dbe1ed; --color-border-strong: #c6cede; --color-border-focus: #2e63a8; --color-accent-default: #2e63a8; --color-accent-deep: #2e63a8; --color-accent-soft: #dce7f6; --color-sage: #5b63d6; --color-sage-deep: #3a40b5; --color-sage-soft: #e2e4fa; --color-sky: #5c8dc9; --color-sky-deep: #2e63a8; --color-sky-soft: #dce7f6; --color-stone: #8a93a8; --color-stone-soft: #e5e8f0; --color-rose: #c77e96; --color-rose-soft: #f2e1e8; --color-rose-deep: #a85271; --color-text-on-accent: #f8faff; } :root[data-theme='nocturne'][data-mode='dark'] { --color-surface-page: #10142a; --color-surface-sunken: #0a0e20; --color-surface-soft: #181e3c; --color-surface-raised: #1f274b; --color-text-primary: #e7eaf7; --color-text-muted: #a5adcb; --color-text-subtle: #6e7699; --color-border-default: #2a3360; --color-border-strong: #3a4478; --color-border-focus: #a7c8f2; --color-accent-default: #a7c8f2; --color-accent-deep: #a7c8f2; --color-accent-soft: #1b2750; --color-sage: #8e95f2; --color-sage-deep: #aaaffb; --color-sage-soft: #222a55; --color-sky: #79a6e0; --color-sky-deep: #a7c8f2; --color-sky-soft: #1b2750; --color-stone: #79829f; --color-stone-soft: #222a4c; --color-rose: #d195ab; --color-rose-soft: #34233a; --color-rose-deep: #ebadc6; --color-text-on-accent: #0b0f22; } /* ---- Plum Dusk ---- */ :root[data-theme='plum'] { --color-surface-page: #f1ecef; --color-surface-sunken: #e7dfe4; --color-surface-soft: #fbf7f9; --color-surface-raised: #ffffff; --color-text-primary: #352636; --color-text-muted: #6e5a6c; --color-text-subtle: #a091a0; --color-border-default: #e0d5dc; --color-border-strong: #cfc0ca; --color-border-focus: #a8707f; --color-accent-default: #a8707f; --color-accent-deep: #a8707f; --color-accent-soft: #f3e4e8; --color-sage: #8e6e92; --color-sage-deep: #6a4a72; --color-sage-soft: #ebe0ec; --color-sky: #c79ca6; --color-sky-deep: #a8707f; --color-sky-soft: #f3e4e8; --color-stone: #a399a2; --color-stone-soft: #e9e1e6; --color-rose: #c58189; --color-rose-soft: #f4e1e2; --color-rose-deep: #a45661; --color-text-on-accent: #fcf8fa; } :root[data-theme='plum'][data-mode='dark'] { --color-surface-page: #221a24; --color-surface-sunken: #190f1b; --color-surface-soft: #2c2230; --color-surface-raised: #352a39; --color-text-primary: #efe6ee; --color-text-muted: #b8a6b6; --color-text-subtle: #7e6f7e; --color-border-default: #3a2e3e; --color-border-strong: #4b3c4f; --color-border-focus: #e0b4be; --color-accent-default: #e0b4be; --color-accent-deep: #e0b4be; --color-accent-soft: #34232a; --color-sage: #b493ba; --color-sage-deep: #c9abce; --color-sage-soft: #322637; --color-sky: #cb9aa6; --color-sky-deep: #e0b4be; --color-sky-soft: #34232a; --color-stone: #8e8090; --color-stone-soft: #2f2533; --color-rose: #cb969c; --color-rose-soft: #352326; --color-rose-deep: #e6b0b6; --color-text-on-accent: #1a1019; } /* ---- Coral Slate ---- */ :root[data-theme='coral'] { --color-surface-page: #f4f6f9; --color-surface-sunken: #e8ecf2; --color-surface-soft: #fcfdff; --color-surface-raised: #ffffff; --color-text-primary: #1e2a38; --color-text-muted: #566375; --color-text-subtle: #909cae; --color-border-default: #e0e5ec; --color-border-strong: #cdd5e0; --color-border-focus: #4e648c; --color-accent-default: #4e648c; --color-accent-deep: #4e648c; --color-accent-soft: #e0e7f1; --color-sage: #f08a6e; --color-sage-deep: #e5683f; --color-sage-soft: #fce4db; --color-sky: #7e93b5; --color-sky-deep: #4e648c; --color-sky-soft: #e0e7f1; --color-stone: #9aa5b4; --color-stone-soft: #e8ecf2; --color-rose: #e07a7e; --color-rose-soft: #fae0e1; --color-rose-deep: #c24e54; --color-text-on-accent: #fffbf9; } :root[data-theme='coral'][data-mode='dark'] { --color-surface-page: #161b24; --color-surface-sunken: #0f141c; --color-surface-soft: #1e2530; --color-surface-raised: #262f3c; --color-text-primary: #e9edf4; --color-text-muted: #a6b1c2; --color-text-subtle: #6e7a8c; --color-border-default: #2c3543; --color-border-strong: #3a4555; --color-border-focus: #a9bee2; --color-accent-default: #a9bee2; --color-accent-deep: #a9bee2; --color-accent-soft: #1e2838; --color-sage: #ff9576; --color-sage-deep: #ff7c58; --color-sage-soft: #34221c; --color-sky: #8da2c6; --color-sky-deep: #a9bee2; --color-sky-soft: #1e2838; --color-stone: #828d9d; --color-stone-soft: #262f3c; --color-rose: #e78d91; --color-rose-soft: #342325; --color-rose-deep: #f2a8ac; --color-text-on-accent: #1a0f0a; } /* ---- Periwinkle Mist ---- */ :root[data-theme='periwinkle'] { --color-surface-page: #eef0f8; --color-surface-sunken: #e3e6f3; --color-surface-soft: #f8f9fe; --color-surface-raised: #ffffff; --color-text-primary: #2c2f45; --color-text-muted: #5e6386; --color-text-subtle: #9499bc; --color-border-default: #dcdef0; --color-border-strong: #c7cae6; --color-border-focus: #4f7bcc; --color-accent-default: #4f7bcc; --color-accent-deep: #4f7bcc; --color-accent-soft: #dee9fb; --color-sage: #8a8fe0; --color-sage-deep: #5b5fd6; --color-sage-soft: #e4e5fa; --color-sky: #7faee6; --color-sky-deep: #4f7bcc; --color-sky-soft: #dee9fb; --color-stone: #9ca0c0; --color-stone-soft: #e7e8f3; --color-rose: #c98eb6; --color-rose-soft: #f2e2ee; --color-rose-deep: #a0648e; --color-text-on-accent: #fbfcff; } :root[data-theme='periwinkle'][data-mode='dark'] { --color-surface-page: #191b2c; --color-surface-sunken: #12131f; --color-surface-soft: #222438; --color-surface-raised: #2a2c42; --color-text-primary: #e8e9f6; --color-text-muted: #aaadce; --color-text-subtle: #717596; --color-border-default: #323452; --color-border-strong: #414469; --color-border-focus: #b0ccf6; --color-accent-default: #b0ccf6; --color-accent-deep: #b0ccf6; --color-accent-soft: #1e2540; --color-sage: #a2a6f0; --color-sage-deep: #bcbffa; --color-sage-soft: #272a45; --color-sky: #8fb4f0; --color-sky-deep: #b0ccf6; --color-sky-soft: #1e2540; --color-stone: #8488ac; --color-stone-soft: #2a2d45; --color-rose: #cf9bc0; --color-rose-soft: #33222f; --color-rose-deep: #e6b4d6; --color-text-on-accent: #131420; } /* ---- Soft Serif (colour only; Outfit type retained) ---- */ :root[data-theme='serif'] { --color-surface-page: #f4efe7; --color-surface-sunken: #ebe3d7; --color-surface-soft: #fbf7f1; --color-surface-raised: #ffffff; --color-text-primary: #3a322a; --color-text-muted: #6e6256; --color-text-subtle: #a59a8b; --color-border-default: #e4dbcd; --color-border-strong: #d6cbb9; --color-border-focus: #b0613d; --color-accent-default: #b0613d; --color-accent-deep: #b0613d; --color-accent-soft: #f3e2d7; --color-sage: #9aa07e; --color-sage-deep: #74795b; --color-sage-soft: #e8e7d6; --color-sky: #c77f5c; --color-sky-deep: #b0613d; --color-sky-soft: #f3e2d7; --color-stone: #a89b8b; --color-stone-soft: #eae3d8; --color-rose: #c58a6e; --color-rose-soft: #f2e2d9; --color-rose-deep: #a85c42; --color-text-on-accent: #fdf8f2; } :root[data-theme='serif'][data-mode='dark'] { --color-surface-page: #211c16; --color-surface-sunken: #19140f; --color-surface-soft: #2b2520; --color-surface-raised: #332c26; --color-text-primary: #f0e9df; --color-text-muted: #b7ac9d; --color-text-subtle: #827667; --color-border-default: #3c342c; --color-border-strong: #4d4338; --color-border-focus: #e6b295; --color-accent-default: #e6b295; --color-accent-deep: #e6b295; --color-accent-soft: #33241b; --color-sage: #b0b58c; --color-sage-deep: #c7cba3; --color-sage-soft: #2e2c1f; --color-sky: #d89572; --color-sky-deep: #e6b295; --color-sky-soft: #33241b; --color-stone: #8e8174; --color-stone-soft: #2f2820; --color-rose: #d89a7e; --color-rose-soft: #33231b; --color-rose-deep: #ebb59a; --color-text-on-accent: #1a1410; } /* ---- Nightfall (the landing "golden hour → neon night" aesthetic as a selectable app palette). LIGHT: a CORAL primary accent on normal light surfaces so cards stay WHITE, with warm family hues (gold-ish sage / coral sky / plum stone-adjacent / rose). DARK: the cinematic aubergine surface set from the landing, coral accent lifted lighter (emphasis inverts). The landing itself does NOT use this theme — it is statically scoped in Landing.module.css. ---- */ :root[data-theme='nightfall'] { --color-surface-page: #f6efe6; --color-surface-sunken: #ede2d4; --color-surface-soft: #fdf9f3; --color-surface-raised: #ffffff; --color-text-primary: #2a2030; --color-text-muted: #6c5f6a; --color-text-subtle: #a1919c; --color-border-default: #e6dbcd; --color-border-strong: #d7c8b6; --color-border-focus: #ec5730; --color-accent-default: #ec5730; --color-accent-deep: #d94a24; --color-accent-soft: #fbe2d6; --color-sage: #e0913a; --color-sage-deep: #c4741f; --color-sage-soft: #f8e6cd; --color-sky: #2aa79b; --color-sky-deep: #1c8479; --color-sky-soft: #d5efec; --color-stone: #9c8f9f; --color-stone-soft: #eae2ea; --color-rose: #e35d84; --color-rose-soft: #fbe0e8; --color-rose-deep: #c43e66; --color-text-on-accent: #fff8f4; } :root[data-theme='nightfall'][data-mode='dark'] { --color-surface-page: #17101d; --color-surface-sunken: #0f0a15; --color-surface-soft: #201530; --color-surface-raised: #241631; --color-text-primary: #f6ede1; --color-text-muted: #c3b2c6; --color-text-subtle: #8b7a90; --color-border-default: #34243f; --color-border-strong: #453153; --color-border-focus: #f78a63; --color-accent-default: #f78a63; --color-accent-deep: #fbaa8a; --color-accent-soft: #331c2a; --color-sage: #f2a93b; --color-sage-deep: #f6c168; --color-sage-soft: #33261a; --color-sky: #34c3b6; --color-sky-deep: #5cdccf; --color-sky-soft: #14302d; --color-stone: #8b7c90; --color-stone-soft: #2a1f33; --color-rose: #ea7b9c; --color-rose-soft: #331f28; --color-rose-deep: #f2a0ba; --color-text-on-accent: #1a0f14; }