/* ========================================================================= tokens.css — NIS2GO design tokens. LIGHT is the DEFAULT (marketing-site → "Light-default theme with opt-in dark") — a premium, institutional identity: warm paper, warm near-black ink, an editorial serif display (Fraunces), and a single disciplined deep-navy accent. Dark is opt-in via . Three-tier discipline: primitives → semantics → component. Components consume ONLY semantic tokens — never a primitive, never a literal. ========================================================================= */ :root { color-scheme: light dark; /* ---- TIER 1 — PRIMITIVES (raw; not used directly in components) ---- */ /* Warm neutrals — paper + ink (premium, not sterile cool-grey on white) */ --paper-000: #ffffff; /* pure — cards lift off the warm page */ --paper-050: #faf8f4; /* warm paper — page background */ --paper-100: #f4efe7; /* warm raised surface */ --paper-150: #ece5d9; /* warm muted band (footer) */ --paper-200: #e7e0d3; /* hairline border */ --paper-300: #d6ccba; /* strong border */ --ink-950: #1b1813; /* warm near-black — strong text */ --ink-800: #36302a; /* warm body text */ --ink-500: #645c52; /* warm muted text (AA ≥4.5 on paper/surface) */ --ink-400: #8a8174; /* Brand — deep institutional navy (the single accent) */ --navy-900: #14274d; --navy-800: #1b3a6b; /* PRIMARY accent — light identity */ --navy-700: #214a86; /* links / hover */ --navy-300: #8fb3ff; /* accent on dark surfaces (AA) */ --navy-200: #b9cdf2; /* Functional status hues (AA-safe pairs) */ --green-500: #34d399; --green-700: #157f54; --green-050: #e9f6ee; --red-500: #f87171; --red-700: #b3261e; --red-050: #fceae8; --amber-500: #f59e0b; --amber-700: #a85b08; --amber-050: #fbf2e2; /* Spacing — 4px base / 8px rhythm */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --space-11: 8rem; /* Type — Fraunces (display serif, variable) + Manrope (body), vendored OFL */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-mono: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace; --text-sm: .889rem; --text-base: 1rem; --text-md: clamp(1.125rem, 1.08rem + .22vw, 1.25rem); --text-lg: clamp(1.28rem, 1.18rem + .5vw, 1.6rem); --text-xl: clamp(1.6rem, 1.36rem + 1.1vw, 2.2rem); --text-2xl: clamp(2.0rem, 1.62rem + 1.7vw, 2.95rem); --text-3xl: clamp(2.45rem, 1.95rem + 2.4vw, 3.7rem); /* editorial display */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --leading-tight: 1.08; --leading-normal: 1.62; --tracking-display: -.005em; /* serif display wants minimal tracking */ /* Precise institutional radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px; /* Warm, soft, layered shadows — premium depth */ --shadow-sm: 0 1px 2px rgb(28 22 14 / .05), 0 2px 6px rgb(28 22 14 / .06); --shadow-md: 0 6px 20px -6px rgb(28 22 14 / .14); --shadow-lg: 0 30px 60px -22px rgb(28 22 14 / .26); --ease-standard: cubic-bezier(.2, 0, 0, 1); --dur-2: 150ms; --dur-3: 240ms; --width-shell: 1180px; --width-prose: 66ch; /* ---- TIER 2 — SEMANTICS (intent; the public API). LIGHT is the default. ---- */ --color-bg: var(--paper-050); --color-surface: var(--paper-100); --color-surface-2: var(--paper-150); --color-card: var(--paper-000); --color-text-strong: var(--ink-950); --color-text: var(--ink-800); --color-text-muted: var(--ink-500); /* One disciplined accent — deep navy, used with intent. */ --color-accent: var(--navy-800); --color-on-accent: #ffffff; --color-primary: var(--navy-800); --color-on-primary: #ffffff; --color-border: var(--paper-200); --color-border-strong: var(--paper-300); --color-ring: var(--navy-700); --color-link: var(--navy-700); --color-success: var(--green-700); --color-success-bg: var(--green-050); --color-danger: var(--red-700); --color-danger-bg: var(--red-050); --color-warning: var(--amber-700); --color-warning-bg: var(--amber-050); /* Non-colour semantic tokens */ --radius-control: var(--radius-md); --radius-card: var(--radius-lg); --shadow-card: var(--shadow-sm); --space-section: clamp(var(--space-9), 6vw, var(--space-11)); } /* ---- DARK THEME — opt-in: override ONLY the semantic tier; warm dark + navy. ---- */ :root[data-theme='dark'] { color-scheme: dark; --color-bg: #161310; --color-surface: #211c16; --color-surface-2: #1a1611; --color-card: #211c16; --color-text-strong: #f3ede2; --color-text: #d8d0c4; --color-text-muted: #a99f90; --color-accent: var(--navy-300); --color-on-accent: #11151f; --color-primary: var(--navy-300); --color-on-primary: #11151f; --color-border: #342c22; --color-border-strong: #4a4034; --color-ring: var(--navy-300); --color-link: var(--navy-200); --color-success: var(--green-500); --color-success-bg: rgb(52 211 153 / .12); --color-danger: var(--red-500); --color-danger-bg: rgb(248 113 113 / .12); --color-warning: var(--amber-500); --color-warning-bg: rgb(245 158 11 / .12); --shadow-sm: 0 2px 8px rgb(0 0 0 / .30); --shadow-md: 0 10px 30px -8px rgb(0 0 0 / .45); --shadow-lg: 0 30px 60px -20px rgb(0 0 0 / .55); }