/* ═══════════════════════════════════════════════════════════════════ Jetfolio Design Tokens — THE single source of truth Design System 2.0 · Direction A "Slate, refined" (owner-approved 2026-08-25, docs/design/MODERNIZATION-ROADMAP.md D1–D3) Rules: - Every color in the product comes from this file via var(). - This file is linked statically in every page's , before all other stylesheets. No runtime injection. - Hard-coded hex values in pages are defects (Phase 3 sweeps them). - The "legacy alias" section keeps every historical token name alive so existing pages keep rendering; new code uses canonical names. ═══════════════════════════════════════════════════════════════════ */ /* Brand type: DM Sans (interface) + DM Mono (operational data). Allowed by the hosting CSP (style-src fonts.googleapis.com, font-src fonts.gstatic.com). display=swap avoids invisible text. */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap'); :root { /* ── Canonical: ground & surfaces ─────────────────────────────── */ --bg: #eef1f6; /* page background */ --surface: #ffffff; /* cards, inputs, tables */ --wash: #f6f8fb; /* hover tint, subtle fills */ --line: #dfe5ee; /* borders, dividers */ --line-strong: #c6cfdc; /* input borders, emphasis */ --navy-bar: #101c2e; /* app bar, dark sidebars */ /* ── Canonical: ink ───────────────────────────────────────────── */ --ink: #16202e; /* headings, KPI numbers, data */ --ink-body: #2a3648; /* body text */ --ink-2: #55627a; /* secondary text */ --ink-muted: #64748b; /* muted text (AA on white) */ --ink-label: #7d89a0; /* 11px uppercase labels ONLY */ /* ── Canonical: accent (the ONE brand color) ──────────────────── */ --accent: #2c5282; --accent-deep: #1e3a5f; --accent-light: #4a7ab5; --accent-soft: #e7eef7; /* ── Canonical: status (bg / ink pairs) ───────────────────────── */ --ok-bg: #e3f3e8; --ok-ink: #1a6b3c; --warn-bg: #fbeedd; --warn-ink: #92500e; --bad-bg: #fbe5e5; --bad-ink: #a12626; --info-bg: #e4eefb; --info-ink: #23568f; --neutral-bg: #e9edf3; --neutral-ink: #55627a; /* ── Typography ───────────────────────────────────────────────── */ --font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'DM Mono', 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Monaco, monospace; /* ── Shape ────────────────────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 8px; /* controls */ --radius-lg: 10px; /* cards */ --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; /* ── Shadows — neutral slate, whisper-quiet ───────────────────── */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(22, 32, 46, 0.04); --shadow-sm: 0 1px 2px rgba(22, 32, 46, 0.05); --shadow-md: 0 2px 6px rgba(22, 32, 46, 0.07); --shadow-lg: 0 4px 14px rgba(22, 32, 46, 0.09); --shadow-xl: 0 8px 22px rgba(22, 32, 46, 0.11); --shadow-inner: inset 0 2px 4px 0 rgba(22, 32, 46, 0.04); --shadow-card: 0 1px 2px rgba(22, 32, 46, 0.05); /* ── Spacing ──────────────────────────────────────────────────── */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; --spacing-3xl: 4rem; /* ── Z-index scale ────────────────────────────────────────────── */ --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-header: 600; --z-modal-backdrop: 1000; --z-modal: 1001; --z-toast: 2000; --z-tooltip: 3000; /* ── Touch targets ────────────────────────────────────────────── */ --touch-target-min: 44px; --touch-target-comfortable: 48px; --touch-target-large: 56px; /* ── Transitions ──────────────────────────────────────────────── */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 350ms ease; /* ══════════════════════════════════════════════════════════════ LEGACY ALIASES — every historical token name, resolved to the canonical palette above. Pages keep using these names until their Phase 3 sweep; delete each alias when its last consumer is migrated. Never point one of these at a non-canonical value. ══════════════════════════════════════════════════════════════ */ /* primary / accent family */ --primary-color: var(--accent); --warm-accent: var(--accent); --warm-accent-light: var(--accent-light); --warm-accent-dark: #1e3a6e; --warm-dark: var(--accent-deep); /* was undefined → brown hovers */ --warm-brown: var(--accent); /* was undefined */ --secondary-color: var(--accent-light); --contrast-navy: var(--accent-deep); --icon-color: var(--accent-deep); --icon-secondary: #475569; --navy-accent: #1e3a6e; --navy-accent-light: var(--accent-light); --navy-accent-dark: var(--accent-deep); --primary-navy: var(--accent); --primary-navy-light: var(--accent-light); --primary-navy-dark: #1e3a6e; --sky-blue: var(--accent-light); --sky-blue-light: #8fb8db; --sky-blue-dark: var(--accent); --accent-purple: var(--accent); --primary-purple: #1e3a6e; --purple: var(--accent); --purple-light: var(--accent-light); --purple-dark: #1e3a6e; --accent-blue: var(--accent); --accent-dark: var(--accent-deep); --accent-soft-bg: var(--accent-soft); /* gold family → slate blues (gold is retired) */ --gold: #6b9fd4; --gold-light: #8fb8db; --gold-dark: #3468a0; --gold-accent: #3468a0; /* was undefined → gold literals */ /* surfaces */ --bg-primary: var(--bg); --bg-secondary: #e2e8f0; --bg-tertiary: #f1f4f8; /* was undefined → warm cream */ --bg-card: var(--surface); --card-bg: var(--surface); /* misspelling in live use */ --bg-card-alt: #f8fafc; --bg-elevated: var(--surface); --bg-muted: var(--wash); /* was undefined */ --warm-bg: var(--bg); --warm-card: var(--surface); --warm-subtle: #f8fafc; /* borders */ --warm-border: var(--line); --warm-border-dark: var(--line-strong); /* was undefined → tan borders */ --warm-divider: var(--line); --border-default: var(--line); --border-subtle: #e8edf4; --border-strong: var(--line-strong); --border-color: var(--line); /* was undefined */ /* text */ --text-color: #1e293b; --text-primary: #1e293b; --text-secondary: var(--ink-2); --text-muted: var(--ink-muted); --text-on-light: #3d4a5f; --text-heading: var(--ink); --text-decorative: #94a3b8; /* decoration only, never body text */ --text-inverse: #ffffff; /* gradients — navy only; the warm/tan gradients are retired */ --gradient-warm: linear-gradient(135deg, #2c5282 0%, #4a7ab5 100%); --gradient-warm-subtle: linear-gradient(135deg, rgba(44,82,130,0.08) 0%, rgba(74,122,181,0.05) 100%); --gradient-navy: linear-gradient(135deg, #1e3a6e 0%, #1e3a5f 100%); --gradient-sky: linear-gradient(135deg, #4a7ab5 0%, #6b9fd4 100%); --gradient-success: linear-gradient(135deg, var(--success-green-dark) 0%, var(--success-green) 100%); --gradient-danger: linear-gradient(135deg, var(--danger-red-dark) 0%, var(--danger-red) 100%); /* semantic status (legacy names) */ --success-color: #15803d; --success-green: #15803d; --success-green-light: #22c55e; --success-green-dark: #166534; --success-bg: #f0fdf4; --success-text: #15803d; --warning-color: #b45309; --warning-yellow: #b45309; --warning-amber: #b45309; --warning-bg: #fffbeb; --warning-text: #854d0e; --danger-color: #b91c1c; --danger-red: #b91c1c; --danger-red-dark: #991b1b; --danger-bg: #fef2f2; --danger-text: #b91c1c; --info-color: var(--accent); --info-text: #1e3a6e; --status-comp: var(--accent); /* crew calendars; was brown */ /* grayscale (Tailwind-era names in live use) */ --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; /* risk levels (FRMS) */ --risk-low: #22c55e; --risk-low-bg: rgba(34, 197, 94, 0.15); --risk-moderate: #eab308; --risk-moderate-bg: rgba(234, 179, 8, 0.15); --risk-high: #f97316; --risk-high-bg: rgba(249, 115, 22, 0.15); --risk-critical: #ef4444; --risk-critical-bg: rgba(239, 68, 68, 0.15); } /* ── Base: every page gets the brand ground and type ──────────────── */ body { font-family: var(--font-family); background: var(--bg-primary); color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Operational data reads in the data font wherever pages opt in */ .mono, .tail-number, .icao, .zulu-time { font-family: var(--font-mono); font-feature-settings: 'tnum'; } /* ══════════════════════════════════════════════════════════════════ PHASE-1 COMPATIBILITY OVERRIDES — retire during Phase 3 sweeps. Carried over from the retired v905-theme.css so dozens of pages keep their navy card headers while they await their sweep. ══════════════════════════════════════════════════════════════════ */ .card-header, .section-header-bar, [class*="card-header"]:not(.settings-card-header):not(.format-card-header):not(.metric-card-header) { background: #1e3a6e !important; color: #ffffff !important; border-bottom: none !important; } /* Child headings inside those navy bands often carry their own dark color rule — force them legible until each page's Phase 3 sweep. */ .card-header h1, .card-header h2, .card-header h3, .card-header h4, .section-header-bar h1, .section-header-bar h2, .section-header-bar h3, [class*="card-header"]:not(.settings-card-header):not(.format-card-header):not(.metric-card-header) h1, [class*="card-header"]:not(.settings-card-header):not(.format-card-header):not(.metric-card-header) h2, [class*="card-header"]:not(.settings-card-header):not(.format-card-header):not(.metric-card-header) h3, [class*="card-header"]:not(.settings-card-header):not(.format-card-header):not(.metric-card-header) h4 { color: #ffffff !important; }