/* ============================================================================ GARAMUT DESIGN TOKENS — single source of truth (redesign Phase 0) docs/ui-redesign-brainstorm.md §3 (palette direction C) + §5 (architecture) Contract (mirrors the Lukaut playbook): - BRAND CONSTANTS are never themed. - SEMANTIC TOKENS are day-first in :root; [data-theme="night"] overrides; [data-surface="field"] is the high-contrast PWA variant. - LEGACY ALIASES keep every pre-redesign variable name working until Phase 1 migrates screens onto the semantic names. - The dashboard + login currently pin so the app keeps its command-navy look until Phase 1 ships the Day/Night switcher with day as the desk default. Fonts are self-hosted (assets/fonts/): a remote font @import would leak every visitor's IP to a third party on a politically sensitive page and block first paint. Latin-subset variable fonts, ~90KB total. ========================================================================== */ @font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/space-grotesk-var-latin.woff2") format("woff2-variations"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Public Sans"; src: url("/assets/fonts/public-sans-var-latin.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-var-latin.woff2") format("woff2-variations"); font-weight: 100 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ---- BRAND CONSTANTS (never themed) ---------------------------------- */ --png-red: #c8102e; /* PNG flag red — shared brand DNA with Lukaut */ --hq-gold-day: #b08321; /* ochre gold — daylight desk accent */ --hq-gold-night: #f5c518; /* bright gold — command-night accent */ --hq-ink: #1c1f26; --hq-paper: #f6f5f1; --hq-navy: #0a1226; /* ---- TYPE ------------------------------------------------------------- */ --font-display: "Space Grotesk", "Inter Tight", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; --font-ui: "Public Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; --track-label: 0.1em; --track-eyebrow: 0.12em; --fs-stamp: 0.78rem; /* ---- SEMANTIC TOKENS — DAY (default) ---------------------------------- */ --bg: var(--hq-paper); --surface: #ffffff; --surface-2: #f1efe9; --surface-sunken: #efede8; --chrome: #eceae4; /* sidebar / app chrome (deeper neutral field) */ --ink-well: #1c1f26; /* permanently-dark stage (login identity) */ --text: #1c1f26; --text-strong: #14161b; --text-soft: #424954; --text-faint: #545b66; --text-on-accent2: #14161b; --accent: #c8102e; /* urgent / primary CTA */ --accent-deep: #9d1220; --accent-2: var(--hq-gold-day); /* secondary CTA, highlights */ --accent-2-deep: #8f6a1a; --accent-2-soft: #cfa53f; --live: #157e83; /* live / positive signal (teal); 4.83:1 on white */ --info: #4a6285; --slate: #5d6470; /* readiness (spec §6: on_target / watch / behind) */ --ready-on-target: #25785a; --ready-watch: #8a6e0e; --ready-behind: #a23b2e; /* volunteer tiers (spec §4) */ --tier-hq: #1c1f26; --tier-leader: #25785a; --tier-sub: #8a6e0e; --tier-volunteer: #5d6470; /* fill tokens — pinned light in BOTH themes (white text on fills must stay AA) */ --ok-fill: #1f7a4d; --on-fill: #ffffff; /* registration / ID status */ --st-pending: #9a6a16; --st-active: #1f7a4d; --st-suspended: #c8102e; --st-issued: #1f7a4d; --st-none: #636a75; --border: #dedbd2; --border-strong: #b9b5aa; --border-input: #7c7a72; --divider: #e8e5dd; --surface-hover: rgba(28, 31, 38, 0.045); --surface-raised: rgba(28, 31, 38, 0.055); --ring: rgba(176, 131, 33, 0.45); --focus-outline: #1c1f26; --shadow-sm: 0 1px 2px rgba(24, 22, 16, 0.04), 0 8px 24px -16px rgba(24, 22, 16, 0.14); --shadow-md: 0 2px 6px rgba(24, 22, 16, 0.05), 0 14px 36px -14px rgba(24, 22, 16, 0.22); --shadow-lg: 0 30px 80px -32px rgba(19, 17, 12, 0.55); --shadow-glow: 0 0 0 1px rgba(176, 131, 33, 0.22), 0 0 28px rgba(176, 131, 33, 0.12); /* ---- SCALES (theme-invariant) ----------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --radius-xs: 4px; --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-amb: ease-in-out; --dur-1: 150ms; --dur-2: 300ms; --dur-3: 550ms; --dur-amb: 1.4s; } /* ---- SEMANTIC TOKENS — NIGHT (command navy) ------------------------------ */ [data-theme="night"] { --bg: var(--hq-navy); --surface: #12203f; --surface-2: #1a2a4d; --surface-sunken: #0d1730; --chrome: #060b18; --ink-well: #060b18; --text: #e3e6ec; --text-strong: #f7f8fa; --text-soft: #a7b0c4; --text-faint: #a7b0c4; --text-on-accent2: #08112a; --accent: #f0606d; /* lifted PNG red (raw fails AA on navy) */ --accent-deep: #c8102e; --accent-2: var(--hq-gold-night); --accent-2-deep: #e89b00; --accent-2-soft: #ffe27a; --live: #5fbfae; --info: #cadcfc; --slate: #8b93a3; --ready-on-target: #5cc08a; --ready-watch: #d4b04a; --ready-behind: #e8924a; --tier-hq: #e8ebf1; --tier-leader: #5cc08a; --tier-sub: #d4b04a; --tier-volunteer: #8b93a3; --st-pending: #d9a84e; --st-active: #5cc08a; --st-suspended: #f0606d; --st-issued: #5cc08a; --st-none: #a3aab8; --border: rgba(227, 230, 236, 0.16); --border-strong: rgba(227, 230, 236, 0.28); --border-input: #7e879a; --divider: rgba(227, 230, 236, 0.10); --surface-hover: rgba(255, 255, 255, 0.045); --surface-raised: rgba(255, 255, 255, 0.055); --ring: rgba(245, 197, 24, 0.5); --focus-outline: #f5c518; /* deployed shell-pass shadows (agent-shell-pass.css, absorbed Phase 0) */ --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 1px 0 rgba(0, 0, 0, 0.55); --shadow-md: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 40px rgba(0, 0, 0, 0.24); --shadow-lg: 0 34px 90px rgba(0, 0, 0, 0.42); --shadow-glow: inset 0 0 0 1px rgba(245, 197, 24, 0.22), 0 18px 42px rgba(0, 0, 0, 0.22); } /* ---- FIELD SURFACE (PWA, sunlight-readable) ------------------------------ */ [data-surface="field"] { --bg: #fdfdfb; --surface: #ffffff; --surface-2: #f2f0ea; --text: #101318; --text-soft: #33383f; --text-faint: #474d57; --border: #b9b5aa; --border-strong: #8d897e; } /* ============================================================================ LEGACY ALIASES — every pre-redesign variable, mapped onto semantic tokens. Do not add new usages; Phase 1 migrates screens to the names above. ========================================================================== */ :root { --gold: var(--accent-2); --gold-deep: var(--accent-2-deep); --gold-soft: var(--accent-2-soft); --black-navy: var(--chrome); --charcoal: var(--surface-sunken); --panel: var(--surface); --panel-raised: var(--surface-2); --slate-line: var(--border); --slate-text: var(--text-faint); --off-white: var(--text-strong); --muted-white: var(--text); --critical-red: var(--accent); --warning-amber: var(--ready-watch); --positive-green: var(--live); --info-blue: var(--info); --neutral-slate: var(--slate); --fg: var(--text); --fg-strong: var(--text-strong); --fg-muted: var(--text-soft); --fg-dim: var(--text-faint); --fg-on-gold: var(--text-on-accent2); /* deployed shell-pass values (agent-shell-pass.css, absorbed Phase 0) */ --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-std: cubic-bezier(0.4, 0, 0.2, 1); --shadow-1: var(--shadow-sm); --shadow-2: var(--shadow-md); --shadow-3: var(--shadow-lg); }