/* ========================================================================== FL510 Design System — TOKENS (BACKLOG 49a) -------------------------------------------------------------------------- Three-tier token architecture (Material 3-corroborated, mobile-design- standards.md rule 6): PRIMITIVE -> SEMANTIC -> COMPONENT. INERT CONTRACT: this file only DEFINES new --ds-* custom properties. It never renames, removes, or changes any existing --fl510-* property or any existing site.css selector. Brand primitives below are RECONCILED FROM the live --fl510-* values (site.css :root) so the new system does not clash with the existing brand. Nothing here styles a bare element — all opt-in consumption happens under the .ds scope (base.css) or component classes. Theme swap lives ONLY at the SEMANTIC tier (light at :root, dark via prefers-color-scheme). Primitives and component tokens are theme-agnostic. ========================================================================== */ /* ========================================================================== TIER 1 — PRIMITIVE (raw palette + scales; no intent, no theme) ========================================================================== */ :root { /* -- Brand grays / ink (reconciled from --fl510-text / --fl510-line) -- */ --ds-c-ink-900: #12181D; /* near-black; dark surface base */ --ds-c-ink-800: #1A2128; /* dark surface raised */ --ds-c-ink-700: #263238; --ds-c-ink-600: #2C363D; /* dark hairline */ --ds-c-ink-500: #556067; /* muted text (light) */ --ds-c-ink-100: #D9DFE2; /* == --fl510-line */ --ds-c-ink-050: #F7FAFA; /* == --fl510-surface */ --ds-c-ink-000: #1E2A30; /* strong body ink on light */ --ds-c-paper: #FFFFFF; /* == --fl510-bg */ --ds-c-mist-100: #E7ECEF; /* text on dark */ --ds-c-mist-300: #A9B4BA; /* muted text on dark */ /* -- Brand blues/teal (reconciled from --fl510-primary family) -- */ --ds-c-brand-500: #227C80; /* accent on light (AA text: 4.9:1 on #FFF) */ --ds-c-brand-300: #56C3C7; /* accent on dark */ /* -- Status hues -- */ --ds-c-danger-500: #C1272D; --ds-c-danger-300: #F08A93; --ds-c-warn-500: #8A5200; --ds-c-warn-300: #E0A648; --ds-c-ok-500: #2E7D32; --ds-c-ok-300: #86C98A; /* ---------------------------------------------------------------------- CURATED PER-AIRCRAFT ACCENT PALETTE (approved 2026-07-11) 8 hue-distinct colors (fleet ~6 tails + headroom). Colorblind-aware: hue is the primary cue, ordinal position + label are the mandated secondary cues (mobile-ui.md) — never rely on hue alone. CONTRAST (WCAG 2.x relative luminance; computed, not eyeballed). Surfaces: light #FFFFFF / raised #F7FAFA ; dark #12181D / raised #1A2128. Every base clears the 3:1 non-text UI-component floor (WCAG 1.4.11) against the HARDER surface in EACH theme (light-raised + dark-raised); every on-color clears 4.5:1 on its base (WCAG 1.4.3 text). # name base on | Lgt LgtRs Drk DrkRs | on-ratio 1 blue #2F6FD6 on-white | 4.81 4.58 3.72 3.38 | 4.81 2 orange #C7621B on-ink | 4.05 3.85 4.42 4.02 | 4.57 3 teal #0E9488 on-ink | 3.74 3.57 4.78 4.34 | 4.94 4 magenta #BE3D97 on-white | 4.88 4.65 3.67 3.33 | 4.88 5 green #3F8F2E on-ink | 4.05 3.86 4.41 4.01 | 4.56 6 violet #7C55D8 on-white | 5.06 4.82 3.53 3.21 | 5.06 7 red #C63A45 on-white | 5.13 4.89 3.49 3.17 | 5.13 8 olive #9A8410 on-ink | 3.70 3.52 4.84 4.40 | 5.00 "on-ink" == #101418 (near-black glyph ink), "on-white" == #FFFFFF. Ordinal->class mapping is owned by Services/DesignSystemPalette.cs so Razor and CSS agree on which tail is which color. ---------------------------------------------------------------------- */ --ds-c-ac-1: #2F6FD6; --ds-c-ac-1-on: #FFFFFF; /* blue */ --ds-c-ac-2: #C7621B; --ds-c-ac-2-on: #101418; /* orange */ --ds-c-ac-3: #0E9488; --ds-c-ac-3-on: #101418; /* teal */ --ds-c-ac-4: #BE3D97; --ds-c-ac-4-on: #FFFFFF; /* magenta */ --ds-c-ac-5: #3F8F2E; --ds-c-ac-5-on: #101418; /* green */ --ds-c-ac-6: #7C55D8; --ds-c-ac-6-on: #FFFFFF; /* violet */ --ds-c-ac-7: #C63A45; --ds-c-ac-7-on: #FFFFFF; /* red */ --ds-c-ac-8: #9A8410; --ds-c-ac-8-on: #101418; /* olive */ /* -- Spacing scale (4px base; mobile rhythm) -- */ --ds-space-0: 0; --ds-space-1: 0.25rem; /* 4px */ --ds-space-2: 0.5rem; /* 8px */ --ds-space-3: 0.75rem; /* 12px */ --ds-space-4: 1rem; /* 16px */ --ds-space-5: 1.5rem; /* 24px */ --ds-space-6: 2rem; /* 32px */ --ds-space-7: 3rem; /* 48px */ /* -- Radius scale -- */ --ds-radius-1: 6px; --ds-radius-2: 10px; --ds-radius-3: 14px; /* == --fl510-radius */ --ds-radius-pill: 999px; /* -- Type scale (rem anchors for the clamp() ramp in base.css) -- */ --ds-type-xs: 0.75rem; --ds-type-sm: 0.875rem; --ds-type-base: 1rem; /* 16px @ root — the iOS no-zoom floor for inputs */ --ds-type-lg: 1.125rem; --ds-type-xl: 1.375rem; --ds-type-2xl: 1.75rem; --ds-type-3xl: 2.25rem; /* -- Touch sizing (WCAG 2.5.8 floor 24px; repo working standard 44px) -- */ --ds-touch-min: 44px; --ds-touch-floor: 24px; /* WCAG 2.2 SC 2.5.8 legal minimum, documented */ /* -- Elevation -- */ --ds-shadow-1: 0 2px 8px rgba(18, 24, 29, 0.08); --ds-shadow-2: 0 8px 24px rgba(18, 24, 29, 0.12); /* -- Motion -- */ --ds-motion-fast: 120ms; --ds-motion-base: 200ms; --ds-ease: cubic-bezier(0.2, 0, 0, 1); } /* ========================================================================== TIER 2 — SEMANTIC (intent; the ONLY tier that swaps light/dark) Light values at :root. ========================================================================== */ :root { --ds-surface: var(--ds-c-paper); --ds-surface-raised: var(--ds-c-ink-050); --ds-text-primary: var(--ds-c-ink-000); --ds-text-secondary: var(--ds-c-ink-500); --ds-line: var(--ds-c-ink-100); --ds-accent: var(--ds-c-brand-500); --ds-accent-on: var(--ds-c-paper); --ds-danger: var(--ds-c-danger-500); --ds-warn: var(--ds-c-warn-500); --ds-ok: var(--ds-c-ok-500); /* Per-aircraft identity — stable hue across themes (bases already clear 3:1 on both light and dark surfaces, so they are NOT re-mapped in dark; only surrounding surfaces/text swap). */ --ds-aircraft-1: var(--ds-c-ac-1); --ds-aircraft-1-on: var(--ds-c-ac-1-on); --ds-aircraft-2: var(--ds-c-ac-2); --ds-aircraft-2-on: var(--ds-c-ac-2-on); --ds-aircraft-3: var(--ds-c-ac-3); --ds-aircraft-3-on: var(--ds-c-ac-3-on); --ds-aircraft-4: var(--ds-c-ac-4); --ds-aircraft-4-on: var(--ds-c-ac-4-on); --ds-aircraft-5: var(--ds-c-ac-5); --ds-aircraft-5-on: var(--ds-c-ac-5-on); --ds-aircraft-6: var(--ds-c-ac-6); --ds-aircraft-6-on: var(--ds-c-ac-6-on); --ds-aircraft-7: var(--ds-c-ac-7); --ds-aircraft-7-on: var(--ds-c-ac-7-on); --ds-aircraft-8: var(--ds-c-ac-8); --ds-aircraft-8-on: var(--ds-c-ac-8-on); /* Neutral (non-aircraft) event treatment */ --ds-event-neutral: #7B8890; --ds-event-neutral-on: #FFFFFF; } @media (prefers-color-scheme: dark) { :root { --ds-surface: var(--ds-c-ink-900); --ds-surface-raised: var(--ds-c-ink-800); --ds-text-primary: var(--ds-c-mist-100); --ds-text-secondary: var(--ds-c-mist-300); --ds-line: var(--ds-c-ink-600); --ds-accent: var(--ds-c-brand-300); --ds-accent-on: var(--ds-c-ink-900); --ds-danger: var(--ds-c-danger-300); --ds-warn: var(--ds-c-warn-300); --ds-ok: var(--ds-c-ok-300); --ds-event-neutral: #8A97A0; --ds-event-neutral-on: #101418; /* --ds-aircraft-* intentionally NOT overridden — stable identity. */ } } /* ========================================================================== TIER 3 — COMPONENT (per-component overrides; reference semantic tokens only) ========================================================================== */ :root { /* Buttons */ --ds-btn-radius: var(--ds-radius-2); --ds-btn-min-h: var(--ds-touch-min); --ds-btn-pad-x: var(--ds-space-4); --ds-btn-bg: var(--ds-accent); --ds-btn-fg: var(--ds-accent-on); --ds-btn-ghost-fg: var(--ds-accent); /* Cards */ --ds-card-bg: var(--ds-surface-raised); --ds-card-border: var(--ds-line); --ds-card-radius: var(--ds-radius-3); --ds-card-pad: var(--ds-space-4); --ds-card-shadow: var(--ds-shadow-1); /* Chips */ --ds-chip-radius: var(--ds-radius-pill); --ds-chip-min-h: var(--ds-touch-min); --ds-chip-pad-x: var(--ds-space-3); --ds-chip-border: var(--ds-line); /* Event blocks (calendar) */ --ds-event-radius: var(--ds-radius-1); --ds-event-pad-x: var(--ds-space-2); --ds-densitybar-h: 4px; --ds-densitybar-gap: 2px; /* Form controls */ --ds-field-radius: var(--ds-radius-2); --ds-field-min-h: var(--ds-touch-min); --ds-field-border: var(--ds-line); --ds-field-bg: var(--ds-surface); --ds-field-focus: var(--ds-accent); }