/* ========================================================================== Durga Analytics - theme.css DESIGN TOKENS ONLY. Every color, radius, shadow, space, and type value used anywhere on the site derives from a variable defined here. Change a token once and the entire site changes. No component file hard-codes a value. Palette faithfully extracted from the design reference (model_risk_mrm.html): pine / amber / parchment editorial system. ========================================================================== */ :root { /* ---- Brand palette (raw) ---- */ --pine: #12271F; --pine-800: #1B3A2E; --pine-700: #274F3E; --graphite: #2A2E2C; --sage: #5E7267; --slate-blue: #3E6B8C; --slate-blue-soft: #8FB2C9; --amber: #C08A2E; --amber-soft: #E3C48A; --parchment: #F5F3EC; --paper: #FBFAF6; --mist: #E6EBE7; --line-raw: #D8DED6; --ink: #17201C; --white: #FFFFFF; /* ---- Semantic tokens (use THESE in components, not the raw palette) ---- */ --color-bg: var(--paper); /* page background */ --color-surface: var(--white); /* cards, cells */ --color-surface-alt: var(--parchment); /* alt sections */ --color-surface-sunken:var(--mist); /* callouts, wells */ --color-text: var(--ink); /* body text */ --color-heading: var(--pine); /* headings */ --color-muted: var(--sage); /* secondary text */ --color-primary: var(--amber); /* primary accent / CTA */ --color-primary-soft: var(--amber-soft); /* hover / on-dark accent */ --color-on-primary: var(--pine); /* text on primary-filled CTA */ --color-eyebrow: #9A6E1E; /* eyebrow/label accent, readable on light */ --color-eyebrow-invert:var(--amber-soft); /* eyebrow on dark sections */ --color-secondary: var(--slate-blue); /* links */ --color-secondary-soft:var(--slate-blue-soft); --color-invert-bg: var(--pine); /* dark sections on light page */ --color-invert-surface:var(--pine-800); --color-invert-text: var(--mist); --color-border: var(--line-raw); --color-border-invert: rgba(255,255,255,.10); --color-header-bg: rgba(18,39,31,.94); /* sticky header */ --color-focus: var(--amber); /* ---- Radius ---- */ --radius: 3px; --radius-lg: 6px; --radius-pill: 40px; /* ---- Shadow ---- */ --shadow: 0 1px 2px rgba(18,39,31,.06), 0 10px 30px rgba(18,39,31,.08); --shadow-sm: 0 1px 2px rgba(18,39,31,.08); /* ---- Spacing scale (rem-based, 4/8 rhythm) ---- */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --section-y: clamp(56px, 8vw, 104px); --wrap-x: clamp(20px, 5vw, 56px); --wrap-max: 1160px; /* ---- Typography ---- */ --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --text-base: 17px; --leading: 1.65; --measure: 68ch; /* Fluid type scale */ --fs-h1: clamp(2.2rem, 5.2vw, 4rem); --fs-h2: clamp(1.8rem, 3.4vw, 2.7rem); --fs-h3: clamp(1.2rem, 2vw, 1.5rem); --fs-h4: 1.05rem; --fs-lede: 1.18rem; --fs-small: .9rem; --fs-mono: .76rem; /* ---- Motion ---- */ --ease: cubic-bezier(.4,0,.2,1); --dur: .15s; color-scheme: light; } /* ========================================================================== DARK MODE - inverts surfaces, keeps the amber accent. Applied via , toggled and persisted by theme.js. ========================================================================== */ :root[data-theme="dark"] { --color-bg: var(--pine); --color-surface: var(--pine-800); --color-surface-alt: #16332810; /* subtle; overridden below */ --color-surface-alt: var(--pine-800); --color-surface-sunken:var(--pine-700); --color-text: var(--mist); --color-heading: var(--white); --color-muted: var(--slate-blue-soft); --color-secondary: var(--amber-soft); --color-secondary-soft:var(--amber-soft); --color-invert-bg: #0E1F18; /* deeper than surface for contrast */ --color-invert-surface:var(--pine-700); --color-invert-text: var(--mist); --color-border: rgba(255,255,255,.12); --color-border-invert: rgba(255,255,255,.14); --color-header-bg: rgba(10,20,15,.92); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.5); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --color-on-primary: #12271F; --color-eyebrow: #E3C48A; --color-eyebrow-invert:#E3C48A; color-scheme: dark; } /* ---- Theme: Slate (cool, professional blue-grey, light) ---- */ :root[data-theme="slate"] { --color-bg: #F4F6F8; --color-surface: #FFFFFF; --color-surface-alt: #E9EEF2; --color-surface-sunken:#DFE6EC; --color-text: #1C2A35; --color-heading: #1B3A5B; --color-muted: #5C7184; --color-primary: #2F6E8F; --color-primary-soft: #8FB2C9; --color-secondary: #3E6B8C; --color-secondary-soft:#8FB2C9; --color-invert-bg: #1B3A5B; --color-invert-surface:#254E77; --color-invert-text: #E1EAF1; --color-border: #CDD8E1; --color-border-invert: rgba(255,255,255,.12); --color-header-bg: rgba(27,58,91,.94); --color-focus: #2F6E8F; --color-on-primary: #FFFFFF; --color-eyebrow: #2F6E8F; --color-eyebrow-invert:#B9D4E6; color-scheme: light; } /* ---- Theme: Sepia (warm parchment, easy on the eyes, light) ---- */ :root[data-theme="sepia"] { --color-bg: #F4ECD8; --color-surface: #FBF6E9; --color-surface-alt: #EDE2C8; --color-surface-sunken:#E5D8B8; --color-text: #3B2F1E; --color-heading: #5B4327; --color-muted: #8A7657; --color-primary: #A66A28; --color-primary-soft: #D9B487; --color-secondary: #8A6D3B; --color-secondary-soft:#C9AE82; --color-invert-bg: #4A3927; --color-invert-surface:#5B4327; --color-invert-text: #F0E6D2; --color-border: #D9C9A5; --color-border-invert: rgba(255,255,255,.12); --color-header-bg: rgba(74,57,39,.94); --color-focus: #A66A28; --color-on-primary: #FFFFFF; --color-eyebrow: #8A5320; --color-eyebrow-invert:#E3C9A0; color-scheme: light; } /* ---- Theme: Mono (high-contrast black & white) ---- */ :root[data-theme="mono"] { --color-bg: #FFFFFF; --color-surface: #FFFFFF; --color-surface-alt: #F2F2F2; --color-surface-sunken:#E8E8E8; --color-text: #111111; --color-heading: #000000; --color-muted: #444444; --color-primary: #000000; --color-primary-soft: #DDDDDD; --color-secondary: #000000; --color-secondary-soft:#333333; --color-invert-bg: #000000; --color-invert-surface:#111111; --color-invert-text: #F2F2F2; --color-border: #CFCFCF; --color-border-invert: rgba(255,255,255,.25); --color-header-bg: rgba(0,0,0,.94); --color-focus: #000000; --color-on-primary: #FFFFFF; --color-eyebrow: #000000; --color-eyebrow-invert:#FFFFFF; color-scheme: light; } /* ---- Theme: Midnight (deep blue-black, high-contrast dark) ---- */ :root[data-theme="midnight"] { --color-bg: #0B1220; --color-surface: #131C2E; --color-surface-alt: #131C2E; --color-surface-sunken:#1B2740; --color-text: #D6E0F0; --color-heading: #FFFFFF; --color-muted: #8CA0C0; --color-primary: #E3B341; --color-primary-soft: #F0D28A; --color-secondary: #6FA8DC; --color-secondary-soft:#9CC3E8; --color-invert-bg: #070C16; --color-invert-surface:#1B2740; --color-invert-text: #D6E0F0; --color-border: rgba(255,255,255,.12); --color-border-invert: rgba(255,255,255,.14); --color-header-bg: rgba(7,12,22,.94); --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.6); --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --color-on-primary: #0B1220; --color-eyebrow: #E3B341; --color-eyebrow-invert:#F0D28A; color-scheme: dark; } /* Respect OS preference on first visit (before JS sets an explicit choice). */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: var(--pine); --color-surface: var(--pine-800); --color-surface-alt: var(--pine-800); --color-surface-sunken:var(--pine-700); --color-text: var(--mist); --color-heading: var(--white); --color-muted: var(--slate-blue-soft); --color-secondary: var(--amber-soft); --color-secondary-soft:var(--amber-soft); --color-invert-bg: #0E1F18; --color-invert-surface:var(--pine-700); --color-invert-text: var(--mist); --color-border: rgba(255,255,255,.12); --color-border-invert: rgba(255,255,255,.14); --color-header-bg: rgba(10,20,15,.92); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.5); color-scheme: dark; } }