/* tokens.css — HUMMBL design tokens, single source of truth for web/. Consumed via @import from shared.css (all pages) so every stylesheet that references var(--*) resolves against this file. The machine-readable mirror lives at web/manifest/design-tokens.json and is asserted in sync by scripts/validate_web_design_system.py. Dark mode is token-layer only: @media (prefers-color-scheme: dark) flips the same custom properties; no per-page or per-component overrides. Dark values derive from the dashboard dark palette (dashboard/app/globals.css) on a deep-green surface per the brand system. */ :root { /* ── Core palette (canonical) ── */ --paper: #f7f8f4; --white: #ffffff; --ink: #102f24; --muted: #52635b; --forest: #173b2d; --green: #26754b; --green-bright: #155b38; --mint: #e6eee5; --mint-soft: #f0f5ef; --border: #d3ded2; --border-strong: #a6bba7; --danger: #9f3f32; --danger-bg: #f8ece8; --code: #10271f; /* ── Text scale (secondary inks used across landing.css) ── */ --text-nav: #17382c; --text-deck: #34483f; --text-body: #334b40; --text-strong: #294337; --text-code: #243a30; --text-json: #284438; --text-closing: #263f34; /* ── Surfaces ── */ --surface-code-inline: #f5f7f3; --surface-pre: #fbfcfa; --surface-receipt: #f4f7f2; --surface-warning: #f4f0e5; --surface-valid: #e7f3e8; --surface-invalid: #f8e8e5; /* ── Borders / status ── */ --border-ok: #b8d1bc; --border-blocked: #e5bbb2; --border-warn: #d7cba9; --border-valid: #98c6a3; --border-invalid: #ddb1a8; --border-soft: #d7e4da; /* ── Status accents ── */ --warn: #856b2a; --warn-text: #6f571b; --valid-text: #116a39; --ok-heading: #0f6839; --switch-label: #08733d; --warm-strong: #93430a; --nudge-bg: #b45309; --button-primary-hover: #0f4c35; --button-disabled-bg: #426456; --switch-track-off: #66786f; --switch-track-on: var(--green-bright); --state-dot: #a7b4ab; /* ── Translucent surfaces ── */ --header-bg: rgba(247, 248, 244, 0.92); --header-bg-soft: rgba(247, 248, 244, 0.9); --header-border: rgba(211, 222, 210, 0.82); --card-glass: rgba(255, 255, 255, 0.91); /* ── On-dark constants (already-dark bands such as .constellation-strip and .terminal-code keep the same values in both color schemes) ── */ --on-accent: #ffffff; --on-dark: #e6eee5; --on-dark-strong: #ffffff; --on-dark-bright: #edf5ef; --on-dark-accent: #7fd19b; --on-dark-muted: #a9d3b6; --on-dark-sep: rgba(255, 255, 255, 0.18); --on-dark-border: rgba(255, 255, 255, 0.14); --knob-shadow: rgba(0, 0, 0, 0.22); /* ── Structural aliases ── */ --bg-primary: var(--paper); --bg-secondary: var(--mint-soft); --bg-elevated: var(--white); --text-primary: var(--ink); --text-secondary: var(--muted); --text-tertiary: #355144; --accent-green: var(--green); --accent-green-hover: #12643c; --accent-warm: #b45309; --accent-success: #15803d; --accent-danger: var(--danger); --accent-warm-bg: rgba(180, 83, 9, 0.12); --accent-warm-bg-subtle: rgba(180, 83, 9, 0.1); --accent-success-bg: rgba(21, 128, 61, 0.1); --accent-danger-bg: rgba(159, 63, 50, 0.1); --accent-green-bg: rgba(38, 117, 75, 0.1); --accent-green-bg-grid: rgba(38, 117, 75, 0.01); --accent-green-bg-faint: rgba(38, 117, 75, 0.04); --accent-green-bg-light: rgba(38, 117, 75, 0.08); --accent-green-bg-medium: rgba(38, 117, 75, 0.25); --accent-green-bg-strong: rgba(38, 117, 75, 0.5); --border-subtle: var(--border); --border-prominent: var(--border-strong); /* ── Typography ── */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace; --font-serif: "Crimson Pro", Georgia, "Times New Roman", serif; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 19px; --text-xl: 24px; /* ── Spacing scale ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; /* ── Radii, shadows, layout ── */ --radius: 14px; --radius-sm: 8px; --radius-xs: 4px; --radius-pill: 999px; --shadow: 0 18px 50px rgba(20, 53, 40, 0.08), 0 2px 5px rgba(20, 53, 40, 0.05); --content: 1380px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root { /* ── Core palette — inverted. Deep green becomes surface, off-white becomes ink; accents track the dashboard dark palette. ── */ --paper: #0b1a14; --white: #163b2c; --ink: #f7f8f4; --muted: #a8c4b6; --forest: #143527; --green: #5cc48c; --green-bright: #4ade80; --mint: #1a4032; --mint-soft: #122b20; --border: #366652; --border-strong: #528c74; --danger: #f87171; --danger-bg: #3d2320; --code: #0d241c; --text-nav: #f0f7f3; --text-deck: #d4e5dc; --text-body: #d4e5dc; --text-strong: #eaf3ed; --text-code: #eaf3ed; --text-json: #eaf3ed; --text-closing: #eaf3ed; --surface-code-inline: #16382b; --surface-pre: #122b21; --surface-receipt: #143126; --surface-warning: #38301c; --surface-valid: #173b2c; --surface-invalid: #3d2320; --border-ok: #35614a; --border-blocked: #6e453d; --border-warn: #66572e; --border-valid: #2f6b4d; --border-invalid: #6e453d; --border-soft: #2e5343; --warn: #e5b04c; --warn-text: #eec06a; --valid-text: #5fd99c; --ok-heading: #5fd99c; --switch-label: #5fd99c; --warm-strong: #93430a; --nudge-bg: #b45309; --button-primary-hover: #2e8f5b; --button-disabled-bg: #4a6355; --switch-track-off: #4a6355; --switch-track-on: #26754b; --state-dot: #5a7a6b; --header-bg: rgba(16, 47, 36, 0.92); --header-bg-soft: rgba(16, 47, 36, 0.9); --header-border: rgba(65, 105, 90, 0.82); --card-glass: rgba(23, 59, 45, 0.91); --text-tertiary: #a8c4b6; --accent-green-hover: #2e8f5b; --accent-warm: #eda94e; --accent-success: #4ade80; --accent-warm-bg: rgba(237, 169, 78, 0.15); --accent-warm-bg-subtle: rgba(237, 169, 78, 0.12); --accent-success-bg: rgba(74, 222, 128, 0.12); --accent-danger-bg: rgba(248, 113, 113, 0.12); --accent-green-bg: rgba(74, 222, 128, 0.12); --accent-green-bg-grid: rgba(74, 222, 128, 0.03); --accent-green-bg-faint: rgba(74, 222, 128, 0.07); --accent-green-bg-light: rgba(74, 222, 128, 0.1); --accent-green-bg-medium: rgba(74, 222, 128, 0.3); --accent-green-bg-strong: rgba(74, 222, 128, 0.55); --shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 2px 5px rgba(0, 0, 0, 0.3); color-scheme: dark; } /* The verderer-green bird mark is illegible on the deep-green surface; give it the same light pill the favicon gets on browser chrome. */ .brand img { background: var(--on-accent); border-radius: 6px; } }