/* ============================================================ Freightgate — Design Tokens Source of truth: DESIGN_SYSTEM.md §9. ACCENT (client direction 2026-06-12, resolves CLAUDE.md open item #1): the brand's own logo palette — brand CYAN #35baf5 is the accent + live state (with NAVY #022d41 text on it, the logo lockup), brand NAVY #022d41 is the dark surface, brand MIST #bfcfd8 is the cool light neutral. The accent lives in --color-live-signal. No raw hex may appear outside this file. ============================================================ */ /* Self-hosted Inter (variable, latin subset) — weights 400–500 only. DESIGN_SYSTEM §3.1: single typeface, no hotlinking. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Brand palette (client, 2026-06-12) — the logo's own colours */ --color-navy: #022d41; /* deep brand navy — dark surfaces */ --color-cyan: #35baf5; /* brand cyan — the bright accent + live state */ --color-mist: #bfcfd8; /* cool light brand neutral — tints, dark-surface text */ --color-navy-2: #073b54; /* lifted navy — elevated dark panels */ /* Core palette */ --color-live-signal: var(--color-cyan); /* accent + live state = brand cyan */ --color-cobalt: #5683d2; --color-obsidian: #0c0a08; --color-paper: #ffffff; --color-limestone: #f4f2f0; --color-charcoal: #1a1919; --color-slate: #4d505d; --color-fog: #999ba3; --color-bone: #d2cecb; /* Status (product-UI illustration only) */ --status-on-time: var(--color-live-signal); --status-at-risk: #e8a33d; --status-delayed: #d65745; /* Semantic roles */ --action-primary: var(--color-live-signal); --action-primary-text: var(--color-navy); /* navy on cyan (6.6:1) — the logo lockup */ /* Accent used as TEXT on light surfaces: raw cyan fails WCAG AA on paper (2.2:1), so eyebrows/kickers on light use this darkened cyan→navy mix (~4.8:1). Raw --color-live-signal stays for accents on DARK surfaces, dots, fills, and CTAs. */ --accent-on-light: color-mix(in srgb, var(--color-cyan) 50%, var(--color-navy)); --text-primary: var(--color-obsidian); /* CLAUDE.md §7: Fog fails 4.5:1 on light surfaces → Slate carries secondary text on light; Fog stays for dark surfaces + decorative. */ --text-secondary: var(--color-slate); --text-muted: var(--color-fog); --text-on-dark: var(--color-paper); --surface-canvas: var(--color-paper); --surface-card: var(--color-limestone); --surface-dark: var(--color-navy-2); /* elevated dark = lifted brand navy */ --surface-ground: var(--color-navy); /* deepest dark = brand navy */ --border-light: var(--color-bone); --border-dark: color-mix(in srgb, var(--color-mist) 30%, var(--color-slate)); /* cool divider on dark */ /* Dawn gradient — appears exactly once (S9 Pulse spotlight) */ --gradient-hero: linear-gradient(180deg, #0c0a08 0%, #5683d2 55%, #f4f2f0 100%); /* Typography */ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; --font-weight-regular: 400; --font-weight-medium: 500; --text-micro: 10px; --leading-micro: 1.2; --text-caption: 13px; --leading-caption: 1.46; --text-body: 16px; --leading-body: 1.5; --text-subheading: 18px; --leading-subheading: 1.43; --text-heading-sm: 20px; --leading-heading-sm: 1.38; --text-heading: 24px; --leading-heading: 1.33; --text-heading-lg: 28px; --leading-heading-lg: 1.3; --text-display-sm: 40px; --leading-display-sm: 1.2; --text-display: 48px; --leading-display: 1.14; --text-display-lg: 64px; --leading-display-lg: 1.05; /* Spacing */ --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px; --spacing-28: 28px; --spacing-32: 32px; --spacing-40: 40px; --spacing-48: 48px; --spacing-52: 52px; --spacing-64: 64px; --spacing-76: 76px; --spacing-128: 128px; --spacing-160: 160px; --spacing-176: 176px; /* Layout */ --page-max-width: 1200px; --section-gap: 80px; --card-padding: 24px; --element-gap: 8px; /* Radius */ --radius-buttons: 4px; --radius-inputs: 4px; --radius-nav: 4px; --radius-cards: 12px; --radius-images: 12px; --radius-tags: 9999px; /* Elevation — surface color only; sole permitted inset */ --nav-glass-edge: inset 0 0 2px 0 rgba(255, 255, 255, 0.6); /* Soft brand-tinted elevation — brand-marketing surfaces only (the problem→control stacking scroll + its floating product callouts). Navy-tinted, low-opacity, long throw; never the hard Material drop shadow. Sanctioned departure from "surface-only" for the immersive card-scroll. */ --shadow-card: 0 1px 2px color-mix(in srgb, var(--color-navy) 6%, transparent), 0 20px 48px -16px color-mix(in srgb, var(--color-navy) 18%, transparent); --shadow-card-up: 0 2px 4px color-mix(in srgb, var(--color-navy) 7%, transparent), 0 36px 70px -20px color-mix(in srgb, var(--color-navy) 24%, transparent); --shadow-panel: 0 1px 3px color-mix(in srgb, var(--color-navy) 8%, transparent), 0 16px 36px -14px color-mix(in srgb, var(--color-navy) 20%, transparent); --shadow-callout: 0 2px 6px color-mix(in srgb, var(--color-navy) 12%, transparent), 0 18px 40px -10px color-mix(in srgb, var(--color-navy) 26%, transparent); --radius-stack: 20px; /* ---------------------------------------------------------- Derived tints — carried verbatim from the APPROVED prototypes (hero-prototype.html / wheel-prototype.html). Sanctioned by DESIGN_SYSTEM 6.13 (code panel, live chip) and 6.16 (hub cobalt tints). Not for new use outside those components. ---------------------------------------------------------- */ --tint-hero-top: #fbfbfa; /* hero canvas top */ --tint-hero-glow: color-mix(in srgb, var(--color-cyan) 16%, var(--color-paper)); /* cyan radial glow */ --tint-badge-wash: #eaf0fb; /* credibility-pill badge chip */ --tint-check: #2f8a5b; /* pill check glyph */ /* Live-chip family — derived from the accent so a future flip (amber → cobalt) re-derives them automatically */ --tint-live-bg: color-mix(in srgb, var(--color-live-signal) 15%, var(--color-paper)); --tint-live-text: color-mix(in srgb, var(--color-live-signal) 38%, var(--color-obsidian)); --tint-live-dot: var(--color-live-signal); --code-bg: #0c0f17; /* tracking-card EDI/JSON panel */ --code-text: #c8d3e6; --code-key: #8fb8ff; --code-str: #9ee6b8; --code-num: #e8c08a; --code-bool: #c98fff; --wheel-cobalt-soft: color-mix(in srgb, var(--color-cyan) 52%, var(--color-mist)); /* resting module icons (soft cyan) */ --wheel-sep: color-mix(in srgb, var(--color-cyan) 20%, var(--color-navy-2)); /* module separators */ --wheel-seg-hover: color-mix(in srgb, var(--color-navy-2) 80%, var(--color-cyan)); /* module hover fill */ --wheel-hub-1: color-mix(in srgb, var(--color-cyan) 46%, var(--color-navy)); /* hub cyan→navy tints — brand core */ --wheel-hub-2: color-mix(in srgb, var(--color-cyan) 28%, var(--color-navy)); --wheel-hub-3: color-mix(in srgb, var(--color-cyan) 13%, var(--color-navy)); /* Wheel depth + luminance (instrument treatment) — gradient stops reference these; all derived from the cobalt/charcoal/obsidian family so an accent re-skin re-derives the dial automatically. */ --wheel-stage-core: color-mix(in srgb, var(--color-navy-2) 84%, var(--color-cyan)); /* domed disc centre */ --wheel-stage-edge: var(--color-navy); /* deep rim */ --wheel-seg-lit: color-mix(in srgb, var(--color-navy-2) 84%, var(--color-cyan) 16%); /* inner-lit bevel */ --wheel-seg-dark: color-mix(in srgb, var(--color-navy) 80%, #000); /* outer-dark bevel */ --wheel-active-lit: color-mix(in srgb, var(--color-live-signal) 64%, var(--color-paper)); /* luminous inner */ --wheel-active-dark: var(--color-live-signal); /* accent outer */ --wheel-rim-hi: color-mix(in srgb, var(--color-cyan) 55%, transparent); /* top-lit bezel */ --wheel-rim-lo: color-mix(in srgb, var(--color-cyan) 7%, transparent); /* bezel shade */ --wheel-glow: color-mix(in srgb, var(--color-live-signal) 55%, transparent); /* active glow (6.16) */ --wheel-radar: color-mix(in srgb, var(--color-cyan) 22%, transparent); /* searchlight sweep */ --wheel-core-glow: color-mix(in srgb, var(--color-live-signal) 50%, transparent); --wheel-hub-1-hi: color-mix(in srgb, var(--wheel-hub-1) 76%, var(--color-paper)); --wheel-hub-2-hi: color-mix(in srgb, var(--wheel-hub-2) 78%, var(--color-paper)); --wheel-hub-3-hi: color-mix(in srgb, var(--wheel-hub-3) 80%, var(--color-paper)); /* Integration fabric (S12) — live cyan glow around the Freightgate node */ --hub-glow: color-mix(in srgb, var(--color-cyan) 14%, transparent); /* core radial glow (live) */ --hub-ring: color-mix(in srgb, var(--color-cyan) 18%, transparent); /* concentric rings */ --hub-conduit: color-mix(in srgb, var(--color-cobalt) 36%, transparent); /* dashed data lines (structural) */ --hub-node-edge: color-mix(in srgb, var(--color-cobalt) 28%, var(--color-charcoal)); /* center node border */ }