/* ============================================================ OurSight — Design Tokens Calm broadcast instrument: ~90% cool-gray + white, blue rationed to "this is OurSight / this matters", red caged to the record dot. ============================================================ */ :root { /* ---------- Fonts ---------- Two faces, mirroring the app's globals.css exactly (E323 design system: "Inter for everything; JetBrains Mono only for identifiers. No serif, no display face"). The old --font-display / --font-serif / --font-body split is deleted rather than aliased to Inter, so it cannot quietly grow back. */ --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace; /* ---------- White / paper ---------- */ --white: #ffffff; --paper: #fbfbfd; /* ---------- Cool-gray ramp (hue ~254, low chroma) ---------- */ --gray-25: #fbfbfd; --gray-50: #f5f6f9; --gray-100: #eceef3; --gray-150: #e4e7ee; --gray-200: #dde0e8; --gray-300: #c3c8d4; --gray-400: #969db0; --gray-500: #626977; --gray-600: #4a5161; --gray-700: #353b49; --gray-800: #272c38; --gray-900: #161a23; --gray-950: #0e1117; /* ---------- Brand blue ramp (keyed to #2563eb) ---------- */ --blue-50: #eef3ff; --blue-100: #dbe5ff; --blue-200: #b9ccff; --blue-400: #5b8bf7; --blue-500: #2563eb; --blue-600: #1d4ed8; --blue-700: #1a3fb0; --blue-glow: rgba(37, 99, 235, 0.14); /* ---------- Reserved red — LIVE / RECORD / DESTRUCTIVE only ---------- */ --live: #e5484d; --live-glow: rgba(229, 72, 77, 0.30); /* ---------- Utility (functional only) ---------- */ --success: #2f855a; --amber: #b7791f; /* ============ Semantic tokens (use these in components) ============ */ --bg: var(--white); --bg-alt: var(--paper); --bg-dark: var(--gray-900); --bg-stage: var(--gray-950); --surface: var(--white); --surface-sunk: var(--gray-50); --text: var(--gray-800); --text-strong: var(--gray-900); --text-body: var(--gray-600); --muted: var(--gray-500); --muted-dark: #aab2c4; --border: var(--gray-200); --border-strong: var(--gray-300); --primary: var(--blue-500); --primary-hover: var(--blue-600); --primary-tint: var(--blue-50); --on-primary: var(--white); --focus: var(--blue-500); --reticle: var(--blue-500); --reticle-dark: var(--blue-400); /* ---------- Layout ---------- */ --container: 1200px; --container-wide: 1320px; --container-prose: 720px; --gutter: clamp(20px, 5vw, 56px); /* Spacing scale (8px base) */ --s1: 8px; --s2: 12px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px; --s9: 128px; --section-y: clamp(88px, 12vw, 152px); /* Radius — kept small and square-cornered; the site's edge is sharp, not bubbly */ --r-xs: 3px; --r-sm: 5px; --r-md: 7px; --r-lg: 9px; --r-pill: 999px; /* Elevation */ --shadow-sm: 0 1px 2px rgba(22, 26, 35, .06); --shadow-md: 0 12px 32px -8px rgba(22, 26, 35, .12); --shadow-lg: 0 24px 56px -16px rgba(22, 26, 35, .16); /* ---------- Type scale ---------- */ --t-hero: clamp(3.1rem, 7vw, 5.75rem); --t-h2: clamp(2.3rem, 4.4vw, 3.4rem); --t-h3: 1.625rem; --t-title: 1.125rem; --t-lead: clamp(1.125rem, 1.7vw, 1.375rem); --t-body: 1.0625rem; --t-small: 0.875rem; --t-ui: 0.875rem; --t-eyebrow: 0.8125rem; --t-data: 0.8125rem; --t-data-xl: clamp(1.75rem, 3vw, 2.5rem); --t-tag: 0.6875rem; --header-h: 64px; color-scheme: light; } /* ============================================================ Dark theme — mirrors the app's light/dark/system theming. The inline script resolves data-theme to light|dark (stored preference, else prefers-color-scheme), so only the dark case is overridden here. Semantic tokens flow to every component; surface/one-off overrides live in styles.css. ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; --white: #10141d; /* "white" surfaces become the card surface in dark */ --paper: #12161f; /* Cool-gray ramp inverted for dark */ --gray-25: #12161f; --gray-50: #161b25; --gray-100: #1b212d; --gray-150: #222a38; --gray-200: #2a3342; --gray-300: #3a4457; --gray-400: #7a8397; --gray-500: #98a1b3; --gray-600: #b8c0ce; --gray-700: #d3d9e3; --gray-800: #e7eaf1; --gray-900: #f5f7fb; --gray-950: #060810; /* Blue tints re-keyed so chips/icon wells are dark, text is light */ --blue-50: #172742; --blue-100: #22375a; --blue-200: #2f486e; --blue-400: #6f9cf8; --blue-500: #4f88f5; --blue-600: #7ea9f7; --blue-700: #a9c8ff; --blue-glow: rgba(79, 136, 245, 0.20); --success: #4caf7a; --amber: #e0a53a; /* Semantic layer */ --bg: #0d1017; --bg-alt: #12161f; --bg-dark: #060810; --bg-stage: #060810; --surface: #161b25; --surface-sunk: #10141d; --text: #e7eaf1; --text-strong: #f5f7fb; --text-body: #bcc4d2; --muted: #8b93a4; --muted-dark: #aab2c4; --border: #262d3b; --border-strong: #38404f; --primary: #4f88f5; --primary-hover: #6a9bf7; --primary-tint: #16233b; --on-primary: #ffffff; --focus: #6f9cf8; --reticle: #6f9cf8; --reticle-dark: #6f9cf8; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow-md: 0 12px 32px -8px rgba(0, 0, 0, .55); --shadow-lg: 0 24px 56px -16px rgba(0, 0, 0, .65); }