/* ============================================================ THEMES — Pavel Presnov Design System Dark mode. Light is the default (defined in colors.css). Dark re-points the SEMANTIC aliases at a calm, sage-tinted dark world. The raw ramps (--paper-*, --ink-*, --sage-*) never change — only the aliases flip — so any product code using semantic tokens adapts for free. Apply with: (or on any subtree). For automatic OS-driven dark mode, see the @media block at the end. ============================================================ */ [data-theme="dark"] { /* Sage-tinted dark neutrals (not pure black — keeps the brand warmth) */ --d-bg: #15170F; /* deepest — page */ --d-surface: #1D2019; /* cards */ --d-raised: #252922; /* raised / popovers */ --d-fill: #2C312A; /* fills, hover */ --d-fill-2: #353B33; /* stronger fill */ --d-line: #313630; /* hairline border */ --d-line-2: #3D443C; /* stronger border */ /* Surfaces */ --surface-page: var(--d-bg); --surface-card: var(--d-surface); --surface-raised: var(--d-raised); --surface-sunken: #131509; --surface-fill: var(--d-fill); --surface-fill-hover: var(--d-fill-2); --surface-inverse: var(--paper-100); /* inverse flips to light */ --surface-accent: var(--sage-500); /* lighter accent reads on dark */ --surface-accent-hover:var(--sage-400); --surface-accent-soft: rgba(125, 163, 155, 0.16); /* Text */ --text-primary: #EEF1EE; --text-secondary: #B4BCB4; --text-muted: #8A938B; --text-on-accent: #15170F; /* dark ink on the lighter sage button */ --text-on-inverse: var(--ink-900); --text-accent: var(--sage-300); --text-link: var(--sage-300); /* Borders */ --border-subtle: var(--d-line); --border-default: var(--d-line-2); --border-strong: #4A524A; --border-accent: var(--sage-500); --border-inverse: var(--paper-100); /* Focus ring — a touch brighter on dark */ --ring-accent: rgba(147, 181, 172, 0.45); /* Semantic pairs — soft tints become low-alpha washes; text brightens */ --success-surface: rgba(94, 140, 106, 0.18); --success-text: #9DBEA6; --success-solid: var(--success-500); --warning-surface: rgba(184, 146, 78, 0.18); --warning-text: #DCB877; --warning-solid: var(--warning-500); --danger-surface: rgba(180, 107, 95, 0.18); --danger-text: #DBA59A; --danger-solid: var(--danger-500); --info-surface: rgba(106, 138, 160, 0.18); --info-text: #A7C0CF; --info-solid: var(--info-500); } /* Shadows read weak on dark — deepen them so elevation still registers */ [data-theme="dark"] { --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.36), 0 1px 2px -1px rgba(0, 0, 0, 0.28); --shadow-md: 0 6px 18px -6px rgba(0, 0, 0, 0.46), 0 2px 6px -2px rgba(0, 0, 0, 0.34); --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.54), 0 4px 12px -6px rgba(0, 0, 0, 0.36); --shadow-xl: 0 30px 70px -20px rgba(0, 0, 0, 0.62); --shadow-focus: 0 0 0 3px var(--ring-accent); --shadow-hairline: inset 0 0 0 1px var(--border-subtle); } /* OPTIONAL — follow the OS setting automatically. Uncomment to enable, or keep the explicit [data-theme] toggle above for a manual switch. @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { // (duplicate the dark aliases here, or set data-theme="dark" via JS) } } */