/* ============================================================= SIMFIXR — DESIGN TOKENS v1.0 Single source of truth for the website (light) + web app (dark). Drop this in once, then style everything with var(--token). LAYERS 1. Primitives — raw brand values, never used directly in UI 2. Semantic — role-based aliases that DO get used in components 3. Themes — :root = LIGHT (website) · [data-theme="dark"] = APP 4. Type / space / radius / motion scales ============================================================= */ :root { /* ---------- 1. PRIMITIVES ---------------------------------- */ /* Brand amber — the single signal colour (from the logo) */ --sf-amber: #F8C808; --sf-amber-bright: #FFD866; /* hover / active highlight */ --sf-amber-deep: #D9AE00; /* pressed · print · gradients */ /* Ink — dark surfaces (app) */ --sf-black: #000000; --sf-ink-900: #060810; /* app background */ --sf-ink-800: #0A0D14; /* app surface */ --sf-ink-700: #0D1017; /* raised surface / card */ --sf-ink-600: #161A24; /* hairline borders */ --sf-ink-500: #232A38; /* strong border / hover face */ /* Paper — light surfaces (website) */ --sf-white: #FFFFFF; --sf-paper: #F6F6F3; /* page background */ --sf-paper-2: #EFEFEC; /* alt section / hover face */ /* Neutral grays — Tailwind-aligned for drop-in compatibility */ --sf-gray-200: #E5E7EB; --sf-gray-300: #D1D5DB; --sf-gray-400: #9CA3AF; --sf-gray-500: #6B7280; --sf-gray-600: #4B5563; --sf-gray-700: #374151; /* Operational status — live flight phase (FIDS) */ --sf-blue: #2563EB; /* Pushback · Departing · Approaching */ --sf-green: #22C55E; /* Boarding */ --sf-status-amber: #F8C808; /* Check-in · Taxiing · Landing */ --sf-orange: #F97316; /* Late · Wait */ --sf-red: #EF4444; /* Delayed */ --sf-go: #FFFFFF; /* Go To Gate */ /* ---------- 2. SEMANTIC (LIGHT / website default) --------- */ --bg: var(--sf-paper); --surface: var(--sf-white); --surface-2: var(--sf-paper-2); --border: var(--sf-gray-200); --border-strong: var(--sf-gray-300); --text: var(--sf-ink-800); /* headings / body */ --text-muted: var(--sf-gray-600); /* secondary copy */ --text-subtle: var(--sf-gray-400); /* meta / captions */ --text-invert: var(--sf-paper); --accent: var(--sf-amber); --accent-hover: var(--sf-amber-deep); --on-accent: var(--sf-ink-900); /* text on amber fill */ --focus-ring: var(--sf-amber); /* Status text pairing: dark text on light blocks, white on dark */ --on-blue: var(--sf-white); --on-green: var(--sf-ink-900); --on-amber: var(--sf-ink-900); --on-orange: var(--sf-ink-900); --on-red: var(--sf-white); --on-go: var(--sf-ink-900); /* ---------- 3. TYPE ---------------------------------------- */ --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; /* Sizes (px @ 16px root) */ --fs-display: 96px; /* hero line .96 track -.035em */ --fs-h1: 42px; /* line 1.04 track -.025em */ --fs-h2: 28px; /* line 1.1 track -.015em */ --fs-h3: 20px; --fs-body-lg: 18px; --fs-body: 16px; --fs-sm: 14px; --fs-mono: 13px; --fs-data: 12px; /* board rows / metadata, mono */ --fs-eyebrow: 12px; /* UPPERCASE · track .18em · amber, mono */ --lh-tight: 0.98; --lh-snug: 1.2; --lh-body: 1.6; --tracking-eyebrow: 0.18em; /* ---------- 4. SPACING · 8pt grid ------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ---------- RADIUS ---------------------------------------- */ --radius-xs: 2px; /* inline chips / status blocks */ --radius-sm: 4px; /* buttons / inputs */ --radius-md: 6px; /* cards */ --radius-lg: 10px; /* panels / hero frames */ --radius-pill: 999px; /* ---------- ELEVATION (dark app leans on borders) --------- */ --shadow-sm: 0 1px 2px rgba(6,8,16,0.06); --shadow-card: 0 8px 24px -12px rgba(6,8,16,0.18); --shadow-panel: 0 24px 60px -32px rgba(6,8,16,0.30); /* ---------- LAYOUT / COMPONENT ---------------------------- */ --container: 1200px; --gutter: 24px; --control-height: 40px; /* buttons / inputs */ --row-height: 44px; /* board row · min touch target */ --header-height: 64px; --border-width: 1px; --focus-width: 2px; /* ---------- MOTION ---------------------------------------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 400ms; } /* ============================================================= 3. DARK THEME — the web app (FlightBoard) Apply with or on any subtree. Only the SEMANTIC layer flips; primitives stay constant. ============================================================= */ [data-theme="dark"] { --bg: var(--sf-ink-900); --surface: var(--sf-ink-800); --surface-2: var(--sf-ink-700); --border: var(--sf-ink-600); --border-strong: var(--sf-ink-500); --text: var(--sf-paper); --text-muted: var(--sf-gray-400); --text-subtle: var(--sf-gray-500); --text-invert: var(--sf-ink-900); --accent: var(--sf-amber); --accent-hover: var(--sf-amber-bright); --on-accent: var(--sf-ink-900); --focus-ring: var(--sf-amber); --shadow-card: 0 8px 24px -12px rgba(0,0,0,0.6); --shadow-panel: 0 24px 60px -32px rgba(0,0,0,0.7); } /* ============================================================= READY-MADE PATTERNS (optional helpers) ============================================================= */ .sf-eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent-hover); } .sf-display { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.035em; color: var(--text); } .sf-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-height); padding: 0 var(--space-5); font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: var(--fw-medium); letter-spacing: 0.12em; text-transform: uppercase; border-radius: var(--radius-sm); border: var(--border-width) solid transparent; cursor: pointer; transition: all var(--dur) var(--ease); } .sf-btn--primary { background: var(--accent); color: var(--on-accent); } .sf-btn--primary:hover { background: var(--accent-hover); } .sf-btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .sf-btn--ghost:hover { border-color: var(--accent); } .sf-status { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-data); text-transform: uppercase; padding: var(--space-1) var(--space-3); border-radius: var(--radius-xs); } .sf-status--boarding { background: var(--sf-green); color: var(--on-green); } .sf-status--active { background: var(--sf-amber); color: var(--on-amber); } .sf-status--departing { background: var(--sf-blue); color: var(--on-blue); } .sf-status--late { background: var(--sf-orange); color: var(--on-orange); } .sf-status--delayed { background: var(--sf-red); color: var(--on-red); } .sf-status--gate { background: var(--sf-go); color: var(--on-go); } :focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; }