/* Local @font-face rules — no third-party requests at runtime. Each woff2 is a variable font supplying all listed weights. */ @font-face { font-family: 'Inter Tight'; src: url('./fonts/InterTight-Latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('./fonts/SourceSerif4-Latin.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('./fonts/JetBrainsMono-Latin.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; } /* ========================================================= Strilume Design System — colors, type, spacing, motion ========================================================= All tokens are dark-first. The light variant is opt-in via [data-theme="light"] on or any container. Use oklch for color so ramps stay perceptually even. ========================================================= */ /* ---------- Webfonts ---------- */ /* ========================================================= */ :root { /* ---------- Neutral ramp (deep navy / ink) ---------- Cool-tinted neutrals — never pure gray. Used for surfaces and text on dark. 12 steps from deepest to brightest. */ --neutral-0: oklch(0.140 0.012 252); /* deepest — page bg */ --neutral-1: oklch(0.175 0.013 252); /* surface-0 */ --neutral-2: oklch(0.210 0.013 252); /* surface-1 (panels, cards) */ --neutral-3: oklch(0.245 0.013 252); /* surface-1-hover */ --neutral-4: oklch(0.285 0.013 252); /* surface-2 (popovers) */ --neutral-5: oklch(0.340 0.013 252); /* divider strong */ --neutral-6: oklch(0.420 0.012 252); /* fg-3 (faint metadata) */ --neutral-7: oklch(0.520 0.011 252); /* fg-2 (secondary text) */ --neutral-8: oklch(0.640 0.010 252); /* fg-2-strong */ --neutral-9: oklch(0.760 0.008 252); /* fg-1 (body text) */ --neutral-10: oklch(0.880 0.006 252); /* fg-1-strong */ --neutral-11: oklch(0.965 0.004 252); /* fg-0 (titles, max contrast) */ /* ---------- Brand accent — Lume amber ---------- Warm, slightly desaturated gold. The lamp on the table. */ --accent-lume: oklch(0.800 0.120 78); --accent-lume-hover: oklch(0.840 0.125 78); --accent-lume-press: oklch(0.740 0.115 78); --accent-lume-fg: oklch(0.180 0.020 78); /* text on lume button */ --accent-lume-tint-6: oklch(0.800 0.120 78 / 0.06); --accent-lume-tint-12: oklch(0.800 0.120 78 / 0.12); /* ---------- Semantic ramp (muted, ink-like) ---------- */ --info: oklch(0.760 0.090 220); /* desaturated cyan — info / OSINT */ --info-bg: oklch(0.760 0.090 220 / 0.10); --success: oklch(0.730 0.085 158); /* sage green — normal / approved */ --success-bg: oklch(0.730 0.085 158 / 0.10); --warning: oklch(0.790 0.115 70); /* ochre — important / warning */ --warning-bg: oklch(0.790 0.115 70 / 0.10); --critical: oklch(0.660 0.150 27); /* rust red — critical / failure */ --critical-bg: oklch(0.660 0.150 27 / 0.12); /* ---------- Sector palette (8 categorical) ---------- Used on map dots, graph nodes, filter chips. AA-legible on --surface-1. Hue-spaced and equally desaturated. */ --sector-energy: oklch(0.790 0.115 70); /* ochre */ --sector-transport: oklch(0.760 0.090 220); /* cyan */ --sector-telecom: oklch(0.730 0.110 270); /* indigo */ --sector-water: oklch(0.760 0.085 195); /* teal */ --sector-health: oklch(0.770 0.090 340); /* mauve */ --sector-defense: oklch(0.660 0.150 27); /* rust */ --sector-government: oklch(0.730 0.085 158); /* sage */ --sector-finance: oklch(0.800 0.120 78); /* lume */ /* ---------- HNS relevance (4 levels) ---------- */ --hns-critical: oklch(0.660 0.150 27); --hns-important: oklch(0.790 0.115 70); --hns-supporting: oklch(0.760 0.090 220); --hns-none: oklch(0.520 0.011 252); /* ---------- Surfaces (semantic aliases) ---------- */ --surface-page: var(--neutral-0); --surface-0: var(--neutral-1); --surface-1: var(--neutral-2); --surface-1-hover: var(--neutral-3); --surface-2: var(--neutral-4); --surface-inset: var(--neutral-0); /* ---------- Foreground (semantic aliases) ---------- */ --fg-0: var(--neutral-11); /* titles */ --fg-1: var(--neutral-9); /* body */ --fg-1-strong: var(--neutral-10); --fg-2: var(--neutral-7); /* secondary */ --fg-2-strong: var(--neutral-8); --fg-3: var(--neutral-6); /* metadata, faint labels */ --fg-on-accent: var(--accent-lume-fg); /* ---------- Borders ---------- */ --border-subtle: oklch(0.965 0.004 252 / 0.08); --border-default: oklch(0.965 0.004 252 / 0.12); --border-strong: oklch(0.965 0.004 252 / 0.22); --border-focus: var(--accent-lume); /* ---------- Shadows ---------- Layered ambient + key, navy-tinted. Used only on floating elements — popovers, dropdowns, modals, the inspector. */ --shadow-1: 0 1px 2px oklch(0.10 0.02 252 / 0.6), 0 1px 1px oklch(0.10 0.02 252 / 0.4); --shadow-2: 0 2px 4px oklch(0.10 0.02 252 / 0.55), 0 4px 12px oklch(0.10 0.02 252 / 0.45); --shadow-3: 0 4px 8px oklch(0.10 0.02 252 / 0.55), 0 16px 32px oklch(0.10 0.02 252 / 0.5); --shadow-inset: inset 0 1px 2px oklch(0.10 0.02 252 / 0.6), inset 0 0 0 1px oklch(0.965 0.004 252 / 0.04); /* ---------- Spacing (4-px base) ---------- */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px; /* ---------- Radii ---------- */ --radius-0: 0px; --radius-1: 2px; /* chips, status pills */ --radius-2: 4px; /* inputs, buttons */ --radius-3: 8px; /* cards */ --radius-4: 12px; /* top-level surfaces, modals */ --radius-pill: 999px; /* status badges only */ /* ---------- Type families ---------- */ --font-display: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-ui: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ---------- Type scale ---------- 12 / 13 / 14 / 16 / 18 / 22 / 28 / 36 / 48 / 60. UI default is 14. Body prose is 16. */ --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-22: 22px; --fs-28: 28px; --fs-36: 36px; --fs-48: 48px; --fs-60: 60px; /* line-heights ride a 4-px grid where possible */ --lh-tight: 1.15; --lh-snug: 1.30; --lh-normal: 1.45; --lh-prose: 1.60; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; /* ---------- Motion ---------- */ --ease-ballistic: cubic-bezier(0.2, 0, 0, 1); --dur-1: 120ms; --dur-2: 160ms; --dur-3: 220ms; /* ---------- Z-stack ---------- */ --z-base: 0; --z-sticky: 10; --z-overlay: 100; --z-modal: 200; --z-toast: 300; } /* ---------- Light variant (rare; reports, print) ---------- */ [data-theme="light"] { --surface-page: oklch(0.985 0.003 90); --surface-0: oklch(0.975 0.004 90); --surface-1: oklch(0.960 0.005 90); --surface-1-hover: oklch(0.945 0.005 90); --surface-2: oklch(0.930 0.006 90); --surface-inset: oklch(0.920 0.005 90); --fg-0: oklch(0.180 0.013 252); --fg-1: oklch(0.260 0.013 252); --fg-1-strong: oklch(0.220 0.013 252); --fg-2: oklch(0.420 0.012 252); --fg-2-strong: oklch(0.360 0.012 252); --fg-3: oklch(0.560 0.010 252); --border-subtle: oklch(0.180 0.013 252 / 0.10); --border-default: oklch(0.180 0.013 252 / 0.16); --border-strong: oklch(0.180 0.013 252 / 0.28); } /* ========================================================= Semantic element styles — drop these on a wrapper to get the brand voice without writing per-component CSS. ========================================================= */ .strilume-root, .strilume-root * { box-sizing: border-box; } .strilume-root { background: var(--surface-page); color: var(--fg-1); font-family: var(--font-ui); font-size: var(--fs-14); line-height: var(--lh-normal); letter-spacing: var(--tracking-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11", "tnum"; } .strilume-root h1, .strilume-h1 { font-family: var(--font-display); font-size: var(--fs-48); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 600; color: var(--fg-0); margin: 0 0 var(--s-5) 0; } .strilume-root h2, .strilume-h2 { font-family: var(--font-display); font-size: var(--fs-28); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 600; color: var(--fg-0); margin: 0 0 var(--s-4) 0; } .strilume-root h3, .strilume-h3 { font-family: var(--font-display); font-size: var(--fs-18); line-height: var(--lh-snug); font-weight: 600; color: var(--fg-0); margin: 0 0 var(--s-3) 0; } .strilume-root h4, .strilume-h4 { font-family: var(--font-display); font-size: var(--fs-14); line-height: var(--lh-snug); font-weight: 600; color: var(--fg-1-strong); margin: 0 0 var(--s-2) 0; } .strilume-eyebrow { font-family: var(--font-ui); font-size: var(--fs-12); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-3); } .strilume-root p, .strilume-p { font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--fg-1); margin: 0 0 var(--s-3) 0; } .strilume-prose { font-family: var(--font-serif); font-size: var(--fs-16); line-height: var(--lh-prose); color: var(--fg-1); max-width: 64ch; } .strilume-meta { font-family: var(--font-ui); font-size: var(--fs-12); color: var(--fg-3); letter-spacing: var(--tracking-normal); } .strilume-mono, code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0; } .strilume-id { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--fg-2-strong); letter-spacing: 0; background: oklch(0.965 0.004 252 / 0.04); border: 1px solid var(--border-subtle); border-radius: var(--radius-1); padding: 1px 6px; } .strilume-wordmark { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-0); } ::selection { background: var(--accent-lume-tint-12); color: var(--fg-0); }