/* ========================================================= MERIDIAN DESIGN SYSTEM — tokens --------------------------------------------------------- Load order: this file first, then any theme override. Default theme is Graphite (dark). Flip via: or data-theme="carbon" ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@300;400;500;600&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap'); :root { /* ---- raw palette (never used directly in components) ---- */ --ink-950: #0A0C0F; --ink-900: #0F1216; --ink-850: #14181D; --ink-800: #1B1F25; --ink-700: #22272E; --ink-600: #2E343C; --ink-500: #444B55; --ink-400: #6B727C; --ink-300: #8B929B; --ink-200: #B7BCC3; --ink-100: #D8DBDF; --paper-50: #FBFAF5; --paper-100: #F2EFE6; --paper-200: #E8E6DE; --paper-300: #D7D3C4; --paper-400: #B8B3A1; --paper-500: #8F8A79; --amber-500: #F2A03D; --amber-400: #F4B563; --amber-300: #F8CD91; --amber-700: #B77220; --red-500: #E24D3C; --red-600: #D23B2A; --red-700: #A42B1E; --cyan-500: #2B8CA6; --cyan-400: #5BAEC2; /* ---- heatmap ramp (cold → hot) ---- */ --heat-0: #0F1216; --heat-1: #14333A; --heat-2: #1E5A66; --heat-3: #3B8088; --heat-4: #7A9A70; --heat-5: #C79748; --heat-6: #F2A03D; --heat-7: #E24D3C; --heat-8: #A42B1E; /* ---- topic colors (fixed, used ONLY in data viz) ---- */ --topic-ai: #5BAEC2; /* cyan */ --topic-quantum: #9B7BD4; /* violet */ --topic-biotech: #6FB27A; /* green */ --topic-defense: #E24D3C; /* red */ --topic-climate: #D7A13E; /* ochre */ --topic-fintech: #45A697; /* teal */ /* ---- type stacks ---- */ --font-sans: "Inter Tight", "Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-serif: "Fraunces", "GT Sectra", "Source Serif Pro", Georgia, serif; /* ---- type scale (1.2 ratio) ---- */ --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; /* base */ --fs-16: 16px; --fs-19: 19px; --fs-23: 23px; --fs-28: 28px; --fs-34: 34px; --fs-40: 40px; --fs-56: 56px; --fs-72: 72px; /* ---- tracking ---- */ --track-tight: -0.02em; --track-0: 0; --track-wide: 0.04em; --track-eyebrow: 0.12em; /* ---- spacing (4-px grid) ---- */ --sp-0: 0px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; --sp-12: 96px; /* ---- radii ---- */ --r-0: 0px; --r-1: 2px; /* house */ --r-2: 4px; /* cards */ --r-3: 8px; /* rare, modals */ --r-pill: 999px; /* ---- borders ---- */ --bw: 1px; /* ---- shadows (only one ambient; one pop) ---- */ --shadow-pop: 0 4px 16px rgba(0,0,0,0.40), 0 1px 0 rgba(255,255,255,0.03) inset; --shadow-none: none; /* ---- motion ---- */ --ease: cubic-bezier(0.2, 0, 0, 1); --dur-hover: 120ms; --dur-panel: 180ms; --dur-route: 240ms; --dur-map: 400ms; /* ---- z ---- */ --z-rail: 10; --z-topbar: 20; --z-popover: 40; --z-modal: 60; --z-toast: 80; /* ---- chrome heights ---- */ --h-topbar: 48px; --h-statusbar: 22px; --w-rail: 320px; --w-inspector: 400px; --h-row: 28px; --h-rowhead: 24px; } /* ========================================================= SEMANTIC — Graphite (default) ========================================================= */ :root, :root[data-theme="graphite"] { --bg: var(--ink-950); --bg-1: var(--ink-900); --bg-2: var(--ink-850); --bg-3: var(--ink-800); --bg-hover: rgba(255,255,255,0.035); --bg-press: rgba(255,255,255,0.06); --fg1: var(--paper-200); /* primary text */ --fg2: var(--ink-200); /* secondary */ --fg3: var(--ink-300); /* tertiary / meta */ --fg4: var(--ink-400); /* disabled */ --line: var(--ink-700); --line-strong: var(--ink-600); --accent: var(--amber-500); --accent-hover: var(--amber-400); --on-accent: #1A120A; --danger: var(--red-600); --warn: var(--amber-500); --ok: #6FB27A; --info: var(--cyan-500); --classification-bar: var(--red-600); --selection: rgba(242,160,61,0.24); color-scheme: dark; } /* ========================================================= SEMANTIC — Ivory (light, editorial / marketing) ========================================================= */ :root[data-theme="ivory"] { --bg: var(--paper-100); --bg-1: var(--paper-50); --bg-2: #FFFFFF; --bg-3: var(--paper-200); --bg-hover: rgba(20,24,29,0.04); --bg-press: rgba(20,24,29,0.08); --fg1: var(--ink-850); --fg2: var(--ink-700); --fg3: var(--ink-500); --fg4: var(--ink-300); --line: var(--paper-300); --line-strong: var(--paper-400); --accent: var(--amber-700); --accent-hover: var(--amber-500); --on-accent: #FBFAF5; --danger: var(--red-700); --warn: var(--amber-700); --ok: #3E7A4A; --info: #1C6B85; --classification-bar: var(--red-700); --selection: rgba(183,114,32,0.18); color-scheme: light; } /* ========================================================= SEMANTIC — Carbon (OLED op-mode) ========================================================= */ :root[data-theme="carbon"] { --bg: #000000; --bg-1: #050608; --bg-2: #0A0C0F; --bg-3: #0F1216; --fg1: var(--paper-200); --fg2: var(--ink-200); --fg3: var(--ink-300); --fg4: var(--ink-400); --line: #181C21; --line-strong: #1F2329; --accent: var(--amber-500); --on-accent: #1A120A; } /* ========================================================= BASE — body, headings, text roles ========================================================= */ html, body { background: var(--bg); color: var(--fg1); font-family: var(--font-sans); font-size: var(--fs-14); line-height: 1.45; font-feature-settings: "ss01", "cv11", "tnum"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--selection); color: var(--fg1); } /* ---- semantic text roles ---- */ .h-display { font-family: var(--font-sans); font-size: var(--fs-72); line-height: 0.95; letter-spacing: var(--track-tight); font-weight: 500; } .h1 { font-family: var(--font-sans); font-size: var(--fs-40); line-height: 1.05; letter-spacing: var(--track-tight); font-weight: 500; } .h2 { font-family: var(--font-sans); font-size: var(--fs-28); line-height: 1.1; letter-spacing: var(--track-tight); font-weight: 500; } .h3 { font-family: var(--font-sans); font-size: var(--fs-19); line-height: 1.2; font-weight: 500; } .h4 { font-family: var(--font-sans); font-size: var(--fs-16); line-height: 1.3; font-weight: 500; } .p, p { font-size: var(--fs-14); line-height: 1.55; color: var(--fg1); margin: 0 0 var(--sp-3) 0; } .lede { font-size: var(--fs-19); line-height: 1.45; color: var(--fg2); font-weight: 400; } .meta { font-size: var(--fs-12); color: var(--fg3); line-height: 1.4; } .eyebrow { font-family: var(--font-sans); font-size: var(--fs-10); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--fg3); font-weight: 500; } .mono, code, kbd { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0; font-variant-numeric: tabular-nums; } .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; } hr { border: 0; border-top: var(--bw) solid var(--line); margin: var(--sp-4) 0; } a { color: var(--fg1); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: color var(--dur-hover) var(--ease), text-decoration-color var(--dur-hover) var(--ease); } a:hover { color: var(--accent); text-decoration-color: var(--accent); } /* ---- tiny classification strip (applied to a top
) ---- */ .classification-strip { height: 3px; background: var(--classification-bar); width: 100%; } .classification-label { font-family: var(--font-mono); font-size: var(--fs-10); letter-spacing: var(--track-eyebrow); color: var(--classification-bar); text-transform: uppercase; }