/* ============================================================ nvllst — foundation tokens ------------------------------------------------------------ Importable by any surface (reader, back-office, store, marketing, standalone tool). Inlinable in ; no JS dependencies for first paint. Architecture — two orthogonal axes: data-theme → surfaces, text, borders (light / dark / system) data-color → accent, links, focus (fathom / ember / grove) Defaults: light theme, Fathom accent. System dark applies via prefers-color-scheme; explicit data-theme attribute beats it. Brand colors are accent-only — they never paint large page/card surfaces. Surfaces always come from Stone-Parchment. For the design rationale behind every token below, see DECISIONS.md and NVLLST-DESIGN-SYSTEM.md. ============================================================ */ /* ────────────────────────────────────────────────────────── 1. Raw palette — flat, never override these ────────────────────────────────────────────────────────── */ :root { /* Fathom (brand — cool teal, H:200°) */ --fathom-0: #080E11; --fathom-05: #091B24; --fathom-10: #0A2938; --fathom-20: #15465E; --fathom-30: #236282; /* light-mode action */ --fathom-40: #2E7FA6; --fathom-50: #3A98C2; /* dark-mode action / KEY COLOR */ --fathom-60: #5BAFD2; --fathom-70: #88C3DE; --fathom-80: #B5D8EA; --fathom-90: #DDEAF1; --fathom-100: #F4F7F9; /* Ember (brand — terracotta / warm copper) */ --ember-0: #0F0803; --ember-05: #1A1107; --ember-10: #251808; --ember-20: #4A2E0F; --ember-30: #6E3F13; /* light-mode action */ --ember-40: #9A5520; --ember-50: #BF7139; /* dark-mode action / KEY COLOR */ --ember-60: #CC8A57; --ember-70: #D8A478; --ember-80: #E4C3A3; --ember-90: #F0DFC8; --ember-100: #F8F4EF; /* Grove (brand — forest green) */ --grove-0: #060906; --grove-05: #0C120C; --grove-10: #0E1A0F; --grove-20: #1C331E; --grove-30: #234C27; /* light-mode action */ --grove-40: #2C6731; --grove-50: #36853D; /* dark-mode action / KEY COLOR */ --grove-60: #44A04C; --grove-70: #62B569; --grove-80: #94C599; --grove-90: #C1DBC4; --grove-100: #E9F0EA; /* Stone-Parchment neutrals — surfaces, text, borders */ --stone-dark: #111110; /* dark page bg (ink-like) */ --stone: #262523; /* dark card / raised */ --stone-light: #383633; /* dark higher elevation */ --ash-dark: #54524E; /* dark border */ --ash: #A09E9A; /* muted text (both modes) */ --ash-light: #C4C2BE; /* light normal border / dark secondary text */ --parch-dark: #DDDBD7; /* light quiet border */ --parchment: #EBE9E3; /* light lowered / dark body prose */ --parch-mid: #F1F0EB; /* LIGHT MODE PAGE BG */ --parch-light: #F7F6F1; /* light card / dark primary text */ /* State colors — 30/50 split, mirror snglst */ --success-30: #256A2E; --success-50: #3DA64A; --warning-40: #BD9520; --warning-50: #D4A828; --danger-30: #9E2424; --danger-50: #D44040; } /* ────────────────────────────────────────────────────────── 2. Typography stacks — literal, never via --wa-font-* The WA kit re-declares --wa-font-* with system fallbacks AFTER our stylesheet loads; var(--wa-font-*) chains lose. ────────────────────────────────────────────────────────── */ :root { --font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif; --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-cond: 'IBM Plex Sans Condensed', 'IBM Plex Sans', 'Arial Narrow', sans-serif; --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace; } /* ────────────────────────────────────────────────────────── 3. Spacing & geometry — inherited from snglst unchanged ────────────────────────────────────────────────────────── */ :root { --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; --spacing-3xl: 64px; --radius-sm: 4px; /* chips, tags */ --radius-md: 8px; /* default — cards, inputs, buttons */ --radius-lg: 12px; /* large cards, panels, modals */ --radius-full: 9999px; } /* ────────────────────────────────────────────────────────── 4. Active-brand indirection --brand-* resolves to the stops of whichever scale data-color points at. Fathom is the default. Theme rules below reference --brand-30 / --brand-50 etc. and stay color-agnostic. ────────────────────────────────────────────────────────── */ :root { --brand-20: var(--fathom-20); --brand-30: var(--fathom-30); --brand-40: var(--fathom-40); --brand-50: var(--fathom-50); --brand-60: var(--fathom-60); --brand-70: var(--fathom-70); --brand-80: var(--fathom-80); --brand-90: var(--fathom-90); --brand-100: var(--fathom-100); } [data-color="ember"] { --brand-20: var(--ember-20); --brand-30: var(--ember-30); --brand-40: var(--ember-40); --brand-50: var(--ember-50); --brand-60: var(--ember-60); --brand-70: var(--ember-70); --brand-80: var(--ember-80); --brand-90: var(--ember-90); --brand-100: var(--ember-100); } [data-color="grove"] { --brand-20: var(--grove-20); --brand-30: var(--grove-30); --brand-40: var(--grove-40); --brand-50: var(--grove-50); --brand-60: var(--grove-60); --brand-70: var(--grove-70); --brand-80: var(--grove-80); --brand-90: var(--grove-90); --brand-100: var(--grove-100); } /* ────────────────────────────────────────────────────────── 5. Light theme (default) — Parchment-driven surfaces ────────────────────────────────────────────────────────── */ :root { color-scheme: light; accent-color: var(--brand-30); /* Surfaces */ --bg: var(--parch-mid); /* the reading "page" */ --surface: var(--parch-light); /* card / raised */ --well: var(--parchment); /* lowered / well */ --border-quiet: var(--parch-dark); --border: var(--ash-light); /* Text */ --text: var(--stone-dark); /* primary */ --text-prose: var(--stone); /* body prose — softer than max-contrast */ --text-sub: var(--stone-light); /* secondary */ --text-muted: var(--ash); --text-disabled:var(--ash-light); /* Action / accent */ --accent: var(--brand-30); --accent-hover: var(--brand-40); --accent-on: var(--parch-light); /* text/icon riding on top of accent */ --accent-dim: color-mix(in srgb, var(--brand-30) 10%, transparent); --focus-ring: color-mix(in srgb, var(--brand-30) 40%, transparent); --selection-bg: color-mix(in srgb, var(--brand-30) 20%, transparent); /* State */ --success: var(--success-30); --success-dim: color-mix(in srgb, var(--success-50) 12%, transparent); --warning: var(--warning-40); --warning-dim: color-mix(in srgb, var(--warning-50) 12%, transparent); --danger: var(--danger-30); --danger-dim: color-mix(in srgb, var(--danger-50) 12%, transparent); } /* ────────────────────────────────────────────────────────── 6. Dark theme — via system preference Mirrored exactly under [data-theme="dark"] below so an explicit user choice can override OS preference. ────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; accent-color: var(--brand-50); --bg: var(--stone-dark); --surface: var(--stone); --well: var(--stone-light); --border-quiet: var(--stone-light); --border: var(--ash-dark); --text: var(--parch-light); --text-prose: var(--parchment); --text-sub: var(--ash-light); --text-muted: var(--ash); --text-disabled:var(--ash-dark); --accent: var(--brand-50); --accent-hover: var(--brand-60); --accent-on: var(--stone-dark); --accent-dim: color-mix(in srgb, var(--brand-50) 12%, transparent); --focus-ring: color-mix(in srgb, var(--brand-50) 45%, transparent); --selection-bg: color-mix(in srgb, var(--brand-50) 22%, transparent); --success: var(--success-50); --warning: var(--warning-50); --danger: var(--danger-50); } } /* ────────────────────────────────────────────────────────── 7. Explicit user override — beats prefers-color-scheme ────────────────────────────────────────────────────────── */ [data-theme="dark"] { color-scheme: dark; accent-color: var(--brand-50); --bg: var(--stone-dark); --surface: var(--stone); --well: var(--stone-light); --border-quiet: var(--stone-light); --border: var(--ash-dark); --text: var(--parch-light); --text-prose: var(--parchment); --text-sub: var(--ash-light); --text-muted: var(--ash); --text-disabled:var(--ash-dark); --accent: var(--brand-50); --accent-hover: var(--brand-60); --accent-on: var(--stone-dark); --accent-dim: color-mix(in srgb, var(--brand-50) 12%, transparent); --focus-ring: color-mix(in srgb, var(--brand-50) 45%, transparent); --selection-bg: color-mix(in srgb, var(--brand-50) 22%, transparent); --success: var(--success-50); --warning: var(--warning-50); --danger: var(--danger-50); } [data-theme="light"] { color-scheme: light; accent-color: var(--brand-30); --bg: var(--parch-mid); --surface: var(--parch-light); --well: var(--parchment); --border-quiet: var(--parch-dark); --border: var(--ash-light); --text: var(--stone-dark); --text-prose: var(--stone); --text-sub: var(--stone-light); --text-muted: var(--ash); --text-disabled:var(--ash-light); --accent: var(--brand-30); --accent-hover: var(--brand-40); --accent-on: var(--parch-light); --accent-dim: color-mix(in srgb, var(--brand-30) 10%, transparent); --focus-ring: color-mix(in srgb, var(--brand-30) 40%, transparent); --selection-bg: color-mix(in srgb, var(--brand-30) 20%, transparent); --success: var(--success-30); --warning: var(--warning-40); --danger: var(--danger-30); } /* ────────────────────────────────────────────────────────── 8. Native form & selection accents ────────────────────────────────────────────────────────── */ ::selection { background: var(--selection-bg); } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }