/* tokens.css — Editorial Instrument design tokens (v3.4, dual-theme) * * Single source of truth for design tokens across simulis.io. Replaces the * inline :root block in styles-pages.css (migration is the Lane C rollout; until * then nothing imports this file, so creating it changes no existing page). * * THEME MODEL * Light is the default (no attribute needed) — it's the walkthrough product's * surface: /dashboard, /walkthrough/*, /project/*, /signin. * Dark is opt-in via — the landing/demo/admin layer: * / (simulis.io), /panel-demo, /admin, and anything with the world map. * * Theme-invariant tokens (spacing, radius, type, motion) live on :root. * Color + shadow tokens are themed: light on :root + [data-theme="light"], * dark on [data-theme="dark"]. * * ACCENT SPLIT (the one new token in v3.4) * --amber brand accent for FILLS, dots, decorative (vibrant, both themes) * --amber-ink accent for TEXT + links (contrast-safe per theme) * On dark, both resolve to the same amber (#e89f4c passes 7.4:1 on dark). * On light, --amber stays vibrant but --amber-ink deepens to a burnt amber so * link/inline-code text clears WCAG AA on warm paper. A single accent value * cannot be both a vibrant fill and accessible body text on a light bg. * * MAP * --bg-deep stays near-black in BOTH themes. The world map is a landing-only * (dark) surface; the original "light mode would break the map" concern holds, * so the map background never lightens. */ /* ── Theme-invariant tokens ──────────────────────────────────────────────── */ :root { /* Type */ --font-display: "Departure Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-body: "Geist", ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif; --font-mono-ui: ui-monospace, "SF Mono", Menlo, monospace; /* Spacing — 8-point grid */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* Radius */ --r-sm: 4px; --r-md: 6px; --r-lg: 12px; --r-pill: 999px; /* Motion */ --ease-default: cubic-bezier(0.2, 0, 0, 1); --ease-bounce: cubic-bezier(0.5, 1.6, 0.4, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 400ms; } /* ── Light theme (default) ───────────────────────────────────────────────── */ :root, [data-theme="light"] { color-scheme: light; --bg: #f6f2e9; /* warm paper, never pure white */ --bg-elevated: #fffdf7; /* cards, inputs, persona tiles — raised warm white */ --bg-deep: #050506; /* map background only — stays dark in light theme */ --fg: #211c16; /* warm ink, never pure #000 */ --fg-dim: #57514a; /* secondary text, metadata (≥13px only) */ --fg-faint: #7c7468; /* placeholders, light dividers — not for text */ --border: #e6e0d2; /* card borders, dividers */ --border-strong: #d0c8b6; /* emphasized dividers, focus rings */ --amber: #e89f4c; /* brand accent — fills, dots, decorative */ --amber-ink: #985a0c; /* accent for TEXT + links (≈5.1:1 on paper) */ --amber-glow: rgba(152, 89, 12, 0.22); /* focus halos */ --amber-deep: #1a1208; /* text ON amber fills (fill is vibrant amber) */ --state-error: #b23b38; /* error text/retry — darker for light bg */ --state-error-bg: #f7e0dd; /* error-tinted backgrounds */ --state-warn: #8a6d0a; /* caution / in-progress text */ --state-good: #3f7d32; /* verified / on-track */ --shadow-card: 0 1px 2px rgba(31, 28, 22, 0.06), 0 0 0 1px var(--border); --shadow-pop: 0 8px 24px -8px rgba(31, 28, 22, 0.18), 0 0 0 1px var(--border); --shadow-focus: 0 0 0 3px var(--amber-glow); } /* ── Dark theme (opt-in: ) ──────────────────────── */ [data-theme="dark"] { color-scheme: dark; --bg: #0e0e0f; /* near-black, warm undertone, never #000 */ --bg-elevated: #1a1a1c; /* cards, inputs, persona tiles */ --bg-deep: #050506; /* map background only */ --fg: #f4f0e8; /* paper-warm white, never #fff */ --fg-dim: #aba59b; /* secondary text, metadata, timestamps */ --fg-faint: #837e74; /* tertiary, dividers */ --border: #2a2a2c; /* card borders, dividers */ --border-strong: #3d3d3f; /* emphasized dividers, focus rings */ --amber: #e89f4c; /* brand accent — fills + text both OK on dark */ --amber-ink: #e89f4c; /* on dark, text accent == brand amber (7.4:1) */ --amber-glow: rgba(232, 159, 76, 0.18); /* dot glow, focus halos */ --amber-deep: #1a1208; /* text on amber backgrounds */ --state-error: #c87070; /* error text, retry buttons */ --state-error-bg: #3d1d1d; /* error-tinted backgrounds */ --state-warn: #e8c84c; /* traffic-light yellow — caution, in-progress */ --state-good: #7eb86a; /* traffic-light green — verified, on track */ --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.02), 0 0 0 1px var(--border); --shadow-pop: 0 8px 24px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--border); --shadow-focus: 0 0 0 3px var(--amber-glow); } /* ── Reduced motion ──────────────────────────────────────────────────────── */ /* Honor the OS setting: drop the panel-fill bounce, keep transitions instant. * Surfaces still reference --dur-* / --ease-* tokens; this zeroes them so no * component needs its own media query. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --ease-bounce: var(--ease-default); } } /* ── Foreign-language phrase (js/foreign-text.js) ───────────────────────────── English translation is the primary line; the authentic original sits underneath, dimmed. Opacity-based so it reads on light or dark surfaces. */ .fl { display: inline-block; vertical-align: baseline; } .fl-en { display: block; } .fl-src { display: block; font-size: 0.85em; opacity: 0.6; font-style: italic; margin-top: 1px; }