/* ========================================================================= PLUMB - Colors & Type foundations Dark-first. Deep blueprint blues, paper-warm text, single signal accent. The name is the system: a plumb line that swings, then finds true vertical. Motion + interaction tokens live in ./interactions.css - linked separately in each page's so the two sheets download in parallel (no @import chain). Fonts are vendored locally: self-contained, no CDN dependency. ========================================================================= */ @font-face { font-family: "Space Grotesk"; src: url("../fonts/SpaceGrotesk-VariableFont_wght.woff2") format("woff2"), url("../fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } :root { color-scheme: dark; /* ---------- INK (page + surfaces, deepest → lightest) ---------- */ --ink-950: #050912; /* shadow, deepest backdrop, modal scrim base */ --ink-900: #0A1124; /* page background */ --ink-850: #0E1730; /* sidebar / chrome */ --ink-800: #13203F; /* card surface */ --ink-750: #182850; /* card surface, elevated */ --ink-700: #1E3262; /* hover surface */ --ink-600: #2A4280; /* strong border */ --ink-500: #364F95; /* divider */ /* ---------- STEEL (muted foregrounds, scales of "text on dark") ---- */ --steel-500: #4C618A; --steel-400: #6A7FA8; --steel-300: #8C9EC2; --steel-200: #B2C0DC; /* ---------- PAPER (primary foregrounds, slightly warm) ------------- */ --paper-100: #E5EAF2; --paper-50: #F4F6FB; --paper-0: #FFFFFF; /* ---------- SIGNAL - the single poppy accent ---------------------- */ /* Use sparingly: primary CTAs, key flags, "live" indicators, brand mark. Never as a large surface - it's a flare, not a fill. */ --signal-700: #B83A14; --signal-600: #DC4A1A; --signal-500: #F25C25; /* canonical accent */ --signal-400: #FF8556; --signal-300: #FFA88A; --signal-50: #FFE9DE; /* ---------- SEMANTIC (status / flags in due-diligence tables) ----- */ --risk-500: #E5484D; --risk-bg: #2B0F14; --caution-500: #F5A524; --caution-bg: #2A1B05; --ok-500: #30A46C; --ok-bg: #08231A; --info-500: #4D9EE8; --info-bg: #0B1F33; /* ---------- SEMANTIC TOKENS (use these in components) ------------- */ --bg: var(--ink-900); --bg-chrome: var(--ink-850); --bg-surface: var(--ink-800); --bg-surface-2: var(--ink-750); --bg-surface-hover: var(--ink-700); --bg-scrim: color-mix(in oklab, var(--ink-950) 80%, transparent); --fg: var(--paper-100); --fg-bright: var(--paper-50); --fg-muted: var(--steel-300); --fg-subtle: var(--steel-400); --fg-faint: var(--steel-500); --border: var(--ink-600); --border-subtle: var(--ink-700); --border-strong: var(--ink-500); --hairline: color-mix(in oklab, var(--steel-500) 35%, transparent); --accent: var(--signal-500); --accent-fg: #FFFFFF; --accent-hover: var(--signal-400); --accent-press: var(--signal-600); /* ---------- TYPE ------------------------------------------------- */ --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Space Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* Type scale - modular, leans editorial-technical */ --text-3xs: 10px; /* labels, registration marks */ --text-2xs: 11px; /* eyebrow / table micro */ --text-xs: 12px; /* meta, captions */ --text-sm: 13px; /* table body, dense UI */ --text-base:14px; /* default UI text */ --text-md: 15px; --text-lg: 17px; /* lead body */ --text-xl: 20px; /* sub-display */ --text-2xl: 24px; /* h3 */ --text-3xl: 32px; /* h2 */ --text-4xl: 44px; /* h1 */ --text-5xl: 60px; /* display */ --text-6xl: 84px; /* hero display */ --leading-tight: 1.08; --leading-snug: 1.25; --leading-body: 1.5; --leading-loose: 1.7; /* Tracking - Space Grotesk wants slight negative tracking at display sizes, slight positive tracking on uppercase eyebrows. */ --track-display: -0.02em; --track-tight: -0.01em; --track-body: 0; /* @kind other */ --track-eyebrow: 0.12em; --track-mono: 0; /* @kind other */ /* ---------- SPACING (4px base grid) ------------------------------ */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ---------- RADII - small, technical, blueprint-like ------------- */ --radius-xs: 2px; /* chips, tags */ --radius-sm: 4px; /* inputs, buttons */ --radius-md: 6px; /* cards */ --radius-lg: 10px; /* panels, modals */ --radius-pill: 999px; /* status pills only */ /* ---------- SHADOWS - restrained; on dark, "elevation" reads via surface brightness, not glow ------------------------------------ */ --shadow-1: 0 1px 0 0 color-mix(in oklab, var(--paper-0) 4%, transparent) inset, 0 1px 2px 0 rgb(0 0 0 / 0.35); --shadow-2: 0 1px 0 0 color-mix(in oklab, var(--paper-0) 5%, transparent) inset, 0 4px 12px -2px rgb(0 0 0 / 0.45); --shadow-3: 0 1px 0 0 color-mix(in oklab, var(--paper-0) 6%, transparent) inset, 0 12px 32px -6px rgb(0 0 0 / 0.55); --shadow-focus: 0 0 0 1px var(--bg), 0 0 0 3px var(--accent); --shadow-focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent); /* ---------- MOTION ----------------------------------------------- */ /* Curves, durations, interaction displacements and the plumb-swing keyframes are defined in ./interactions.css (imported at top of file). Tokens available here: --ease-out, --ease-in-out, --ease-plumb, --ease-settle, --ease-radar, --dur-instant…--dur-radar, --press-drop, --lift-rise, --nudge, --plumb-swing-max. */ } /* ========================================================================= SEMANTIC TYPE STYLES - use these as classes or copy the rules ========================================================================= */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); font-feature-settings: "ss01", "ss02", "kern"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .t-display { font-family: var(--font-display); font-size: var(--text-6xl); line-height: var(--leading-tight); letter-spacing: var(--track-display); font-weight: 500; color: var(--fg-bright); } .t-h1 { font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--track-display); font-weight: 500; color: var(--fg-bright); } .t-h2 { font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-snug); letter-spacing: var(--track-tight); font-weight: 500; color: var(--fg-bright); } .t-h3 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--track-tight); font-weight: 500; color: var(--fg-bright); } .t-h4 { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: var(--track-tight); font-weight: 500; color: var(--fg); } .t-lead { font-family: var(--font-body); font-size: var(--text-lg); line-height: var(--leading-body); color: var(--fg); font-weight: 400; } .t-body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); color: var(--fg); font-weight: 400; } .t-body-sm { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-body); color: var(--fg); } .t-caption { font-family: var(--font-body); font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--fg-muted); } .t-eyebrow { font-family: var(--font-body); font-size: var(--text-2xs); line-height: 1; letter-spacing: var(--track-eyebrow); text-transform: uppercase; font-weight: 500; color: var(--fg-muted); } .t-mono { font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-body); letter-spacing: var(--track-mono); font-weight: 400; color: var(--fg); font-feature-settings: "tnum", "zero", "ss01"; } .t-mono-sm { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.01em; color: var(--fg-muted); font-feature-settings: "tnum", "zero"; } /* Numeric - for tabular data, KPIs, hectares, prices. Tabular figures. */ .t-numeric { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "ss01", "zero"; letter-spacing: var(--track-tight); } /* Link */ a.link, .link { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } a.link:hover, .link:hover { color: var(--accent-hover); border-color: var(--accent-hover); } /* Selection */ ::selection { background: color-mix(in oklab, var(--accent) 35%, transparent); color: var(--fg-bright); }