/* ============================================================================ FLIGHT DECK — Token system for Saario Academy (Aerospace / Mission-Control) Three tiers: primitive -> semantic -> component. Light + Dark both fully designed. ONE accent mechanism serves theme + track. ============================================================================ */ /* --------------------------------------------------------------------------- TIER 1 — PRIMITIVES (raw values, theme-agnostic) --------------------------------------------------------------------------- */ :root { /* Ink scale — cold near-black command-console greys (blue-shifted) */ --color-ink-1000: #04060a; /* deepest console black */ --color-ink-950: #070a10; --color-ink-900: #0b0f16; --color-ink-850: #11161f; --color-ink-800: #161c27; --color-ink-750: #1d2530; --color-ink-700: #27303d; --color-ink-600: #38434f; --color-ink-500: #4e5a68; --color-ink-400: #6b7886; --color-ink-300: #8d99a6; --color-ink-200: #b3bdc8; --color-ink-100: #d4dae1; --color-ink-050: #e8ebef; --color-ink-025: #f3f5f7; --color-ink-000: #fbfcfd; /* paper white */ /* Armed red — restrained crimson "active/armed" accent (Defendo) */ --color-red-700: #8a0f14; --color-red-600: #b3171d; --color-red-500: #d11a22; /* primary armed red */ --color-red-400: #e23b40; --color-red-300: #f06a6d; --color-red-glow: rgba(209, 26, 34, 0.32); /* Signal greens/ambers for instrument-status semantics (used sparingly) */ --color-amber-500: #c8920f; --color-green-500: #1f9d6b; /* Track accent primitives (per-track re-skin source) */ --color-track-kravmaga: #d11a22; /* armed red — control / readiness */ --color-track-kickboxing: #e0531a; /* kinetic orange */ --color-track-grappling: #2f7fd6; /* technical blue */ --color-track-safekid: #1f9d6b; /* safe green */ /* Type families — clean grotesque display + monospace data */ --font-display: "Helvetica Neue", "Arial Narrow", "Roboto Condensed", Arial, sans-serif; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace, "Menlo", "Consolas", monospace; /* Type scale — tight, engineered */ --fs-micro: 0.6875rem; /* 11px data labels */ --fs-tiny: 0.75rem; /* 12px */ --fs-small: 0.8125rem; /* 13px */ --fs-body: 0.9375rem; /* 15px */ --fs-md: 1.0625rem; /* 17px */ --fs-lg: 1.375rem; /* 22px */ --fs-xl: 1.875rem; /* 30px */ --fs-2xl: 2.625rem; /* 42px */ --fs-3xl: 3.75rem; /* 60px */ --fs-4xl: 5.25rem; /* 84px */ --fs-5xl: 7rem; /* 112px hero readout */ --lh-tight: 0.96; --lh-snug: 1.12; --lh-base: 1.55; --lh-loose: 1.7; --ls-mono: 0.16em; /* wide tracking on mono labels */ --ls-display: -0.02em; --ls-caps: 0.22em; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 800; /* Spacing — 4px base grid */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* Radius — minimal, instrument-panel sharp */ --radius-0: 0; --radius-1: 2px; --radius-2: 4px; --radius-pill: 999px; /* Hairlines / grid */ --hairline: 1px; --grid-unit: 8px; /* Motion — precise, mechanical */ --ease-mech: cubic-bezier(0.2, 0, 0, 1); --ease-snap: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; /* z layers */ --z-nav: 100; --z-overlay: 200; } /* --------------------------------------------------------------------------- TIER 2 — SEMANTIC (theme-dependent). DARK = default flight-deck console. --------------------------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; /* Stepped surfaces — layered elevation, NOT inversion */ --bg-base: var(--color-ink-1000); /* page ground */ --bg-surface: var(--color-ink-900); /* primary panel */ --bg-raised: var(--color-ink-850); /* card on panel */ --bg-overlay: var(--color-ink-800); /* nested / popover */ --bg-sunken: var(--color-ink-950); /* recessed wells */ --bg-inverse: var(--color-ink-050); --text-primary: var(--color-ink-050); --text-secondary: var(--color-ink-300); --text-muted: var(--color-ink-500); --text-faint: var(--color-ink-600); --text-inverse: var(--color-ink-1000); --text-on-accent: var(--color-ink-000); /* Hairline rules — the grid discipline */ --rule: var(--color-ink-750); --rule-strong: var(--color-ink-600); --rule-faint: var(--color-ink-850); --grid-line: rgba(141, 153, 166, 0.07); /* faint coordinate grid */ --grid-tick: rgba(141, 153, 166, 0.18); /* registration marks */ /* Accent — defaults to armed red, overridable per track */ --accent: var(--color-red-500); --accent-strong: var(--color-red-600); --accent-soft: rgba(209, 26, 34, 0.14); --accent-glow: var(--color-red-glow); --accent-text: var(--color-red-400); --status-armed: var(--color-red-500); --status-ok: var(--color-green-500); --status-warn: var(--color-amber-500); /* Elevation — thin, screen-glow shadows */ --shadow-1: 0 1px 0 rgba(0,0,0,0.6); --shadow-2: 0 8px 24px -12px rgba(0,0,0,0.8); --shadow-3: 0 24px 60px -20px rgba(0,0,0,0.9); --shadow-glow: 0 0 0 1px var(--accent), 0 0 24px -4px var(--accent-glow); --img-grade: grayscale(0.55) contrast(1.18) brightness(0.72); --img-overlay: linear-gradient(180deg, rgba(4,6,10,0.2) 0%, rgba(4,6,10,0.85) 100%); } [data-theme="light"] { color-scheme: light; /* Crisp technical white-paper, same grid discipline */ --bg-base: var(--color-ink-025); --bg-surface: var(--color-ink-000); --bg-raised: #ffffff; --bg-overlay: var(--color-ink-000); --bg-sunken: var(--color-ink-050); --bg-inverse: var(--color-ink-950); --text-primary: var(--color-ink-950); --text-secondary: var(--color-ink-600); --text-muted: var(--color-ink-400); --text-faint: var(--color-ink-300); --text-inverse: var(--color-ink-000); --text-on-accent: var(--color-ink-000); --rule: var(--color-ink-200); --rule-strong: var(--color-ink-400); --rule-faint: var(--color-ink-100); --grid-line: rgba(78, 90, 104, 0.06); --grid-tick: rgba(78, 90, 104, 0.22); --accent: var(--color-red-600); --accent-strong: var(--color-red-700); --accent-soft: rgba(209, 26, 34, 0.08); --accent-glow: rgba(209, 26, 34, 0.18); --accent-text: var(--color-red-600); --status-armed: var(--color-red-600); --status-ok: var(--color-green-500); --status-warn: var(--color-amber-500); --shadow-1: 0 1px 0 rgba(11,15,22,0.05); --shadow-2: 0 8px 24px -16px rgba(11,15,22,0.25); --shadow-3: 0 24px 60px -28px rgba(11,15,22,0.32); --shadow-glow: 0 0 0 1px var(--accent), 0 0 20px -6px var(--accent-glow); --img-grade: grayscale(0.4) contrast(1.05) brightness(0.96); --img-overlay: linear-gradient(180deg, rgba(251,252,253,0.0) 30%, rgba(251,252,253,0.78) 100%); } /* --------------------------------------------------------------------------- PER-TRACK ACCENT RE-SKIN — same mechanism as theme. Set data-track on any subtree to re-point --accent and derived tokens. --------------------------------------------------------------------------- */ [data-track="krav-maga"] { --accent: var(--color-track-kravmaga); --accent-text: var(--color-track-kravmaga); --accent-soft: rgba(209,26,34,0.12); --accent-glow: rgba(209,26,34,0.30); } [data-track="kickboxing"] { --accent: var(--color-track-kickboxing); --accent-text: var(--color-track-kickboxing); --accent-soft: rgba(224,83,26,0.12); --accent-glow: rgba(224,83,26,0.30); } [data-track="grappling"] { --accent: var(--color-track-grappling); --accent-text: var(--color-track-grappling); --accent-soft: rgba(47,127,214,0.12); --accent-glow: rgba(47,127,214,0.30); } [data-track="safe-kid"] { --accent: var(--color-track-safekid); --accent-text: var(--color-track-safekid); --accent-soft: rgba(31,157,107,0.12); --accent-glow: rgba(31,157,107,0.30); } /* --------------------------------------------------------------------------- TIER 3 — COMPONENT (optional, derive from semantic) --------------------------------------------------------------------------- */ :root { --btn-bg: var(--accent); --btn-text: var(--text-on-accent); --btn-bg-ghost: transparent; --nav-h: 60px; --panel-pad: var(--space-6); --rule-w: var(--hairline); }