/* ============================================================================ tokens.css — Sovereign Flight-Deck Design Tokens (Phase 2 Wave 1) ============================================================================ Sprint: S9-DS-PHASE2-W1 Source: docs/reviews/S9-DS-PHASE1-analysis-v2.md §2 token enumeration governance file id=15 (philosophy v0.5 — Tier 2 flight-deck) governance file id=19 (chrome/content separability amendment) templates/mockups/today-v2.jsx, tasks-v2.jsx, roadmap-v2.jsx Scope: Wave 1 is TOKENS ONLY. Component styles are Wave 2. Mechanical enforcement is Wave 3. Accessibility CI is Wave 4. Cascade: This file declares its tokens under `@layer tokens` to compose with sovereign.css's existing layer order: @layer reset, tokens, base, components, utilities; Flight-deck utility classes appended at the bottom under `@layer utilities` (same name as sovereign.css; later declarations win within the same layer per cascade order). Namespace discipline (separability amendment id=19, constraint #2/#3): All flight-deck tokens use the prefix --color-*, --type-*, --lh-*, --ls-*, --font-*-flightdeck, --space-*-* (semantic aliases), --motion-*, --ease-flightdeck, --gradient-*, --shadow-*, --focus-outline-*, --viewport-*. They do NOT redefine sovereign.css tokens such as --terracotta, --amber, --warning, --info, --font-body, --font-display, --mono, --space-1..10. Existing ui-kit.css consumers are unaffected. Sovereign canvas value note: Mockups use --color-canvas: #0A0B0D as the flight-deck canvas hex. sovereign.css uses --surface-0: #151311 for non-flight-deck routes. These are DIFFERENT tokens at different prefixes; no value conflict. Reduced-motion gate: A media query at the bottom of this file zeros stagger and disables the three named keyframes. Wave 3 builds the CI check that fails if any new @keyframes lacks a paired override; Wave 1 honors philosophy §3.1 in the file itself. ============================================================================ */ @layer tokens { :root { /* ───────────────────────────────────────────────────────────────────── 1. TYPOGRAPHY (Phase 1 v2 §2.1) ───────────────────────────────────────────────────────────────────── */ /* Family — flight-deck-specific aliases. Do NOT replace --font-display /--font-body/--mono in sovereign.css (used by non-flight-deck routes). Fallback chain ordered per separability amendment §3 (constraint #3: register integrity at fallback — serif vs mono distinction holds). */ --font-display-flightdeck: 'Instrument Serif', 'EB Garamond', Georgia, 'Times New Roman', serif; --font-mono-flightdeck: 'IBM Plex Mono', 'JetBrains Mono', 'Menlo', 'Courier New', monospace; /* Size tiers (7 tiers — label-micro eliminated by 12px floor per §2.1 + §D.1.1 closure). Sizes pulled from mockup style objects: hero 48px (today-v2 dayShape h1 / 44px tasks/roadmap heroes) title 32px (roadmap-v2 sprint header h2) subtitle 22px (today-v2 oracle prose / mission card title) primary-display 28px (vitals stat value, sprint progress %) body 13px (default mono body, signal/meta rows) body-mono 13px (alias for explicit mono-body usage) label 12px (mono uppercase structural marker — 12px FLOOR) Hero collapses today-48 + tasks/roadmap-44 to a single token; if Wave 2 evidence shows a meaningful split, add a hero-secondary variant rather than re-tier the whole scale. */ --type-hero: 48px; --type-title: 32px; --type-subtitle: 22px; --type-primary-display: 28px; --type-body: 13px; --type-body-mono: 13px; --type-label: 12px; /* Line-heights — 6 roles per §2.1. Mockup evidence: tight-hero 1.1 (today-v2 h1, tasks-v2 h1, roadmap-v2 h1) tight-title 1.15 (mission-card h3, roadmap-v2 sprint title h4) medium-title 1.25 (TaskRow h3 lineHeight: 1.25) display-prose 1.35 (oracle prose: lineHeight 1.35) body-default 1.5 (note paragraphs: lineHeight 1.5) tight-display-value 1.0 (vitals value: lineHeight 1) */ --lh-tight-hero: 1.1; --lh-tight-title: 1.15; --lh-medium-title: 1.25; --lh-display-prose: 1.35; --lh-body-default: 1.5; --lh-tight-display-value: 1.0; /* Letter-spacings — 9 roles per §2.1 (consolidation will evolve in Wave 2). Mockup evidence: hero-negative -0.01em (h1 hero / sprint titles / section h2) normal 0 (default body) body-plus 0.02em (body mono with slight track) tiny 0.05em (thread time / signal label / meta tags) micro 0.06em (default dim mono / sub-annotation) mono-small 0.10em (priority labels / mission id / sprint date) structural 0.12em (section header counts, hour ticks, kind tag) tag 0.14em (phase pill, action button, hotkey row) The original §2.1 inventory listed 8 roles plus metadata/pill/label- heavy at 0.16-0.18em — those are consolidated into 'label' below alongside the canonical structural-marker treatment. */ --ls-hero-negative: -0.01em; --ls-normal: 0; --ls-body-plus: 0.02em; --ls-tiny: 0.05em; --ls-micro: 0.06em; --ls-mono-small: 0.10em; --ls-structural: 0.12em; --ls-tag: 0.14em; --ls-label: 0.18em; /* 9th — used by Label component (mono uppercase 12px) */ /* Text-transform — uppercase is structurally load-bearing on labels (§5.3 / §2.4 labeling register). One token kept short. */ --text-transform-label: uppercase; /* ───────────────────────────────────────────────────────────────────── 2. COLOR (Phase 1 v2 §2.2 + §8.1 disposition) ───────────────────────────────────────────────────────────────────── 13 values across 6 semantic categories. Hexes pulled verbatim from mockup style objects (consistent across today-v2 / tasks-v2 / roadmap-v2; done-green only in roadmap-v2). Per §8.1 disposition: amber-ambient is a USAGE CLASS (.is-ambient, defined in @layer utilities below), not a second hex. The animation (blink) + context (now-marker, terminal cursor) carries the semantic distinction; both share --color-amber-urgent. --color-amber-edge is NOT a second amber semantic — it is the observed mockup value used for oracle-card border and gradient alphas (`amberDim` in mockups). It is a structural-edge value for amber-bordered surfaces, not a second amber-state semantic. */ /* Structural / chrome (5) */ --color-canvas: #0A0B0D; --color-panel: #111316; --color-panel-hi: #14171B; --color-line: #1E2227; --color-line-hi: #2A3038; /* Text hierarchy (3) */ --color-bone: #F4F1EA; --color-dim: #8B8F96; --color-dimmer: #5C6068; /* Semantic accents (4) */ --color-amber-urgent: #E8B455; /* §8.1 single canonical amber hex */ --color-amber-edge: #7A5F2E; /* mockup `amberDim` — oracle card borders, past-band gradient stops */ --color-cyan: #6FD3C7; /* section structure, review-state, focus outline (§2.7) */ --color-rust: #C87450; /* warnings, blocked-by, warn-tone */ --color-done-green: #556E5A; /* roadmap-v2 closed sprint, kanban done lane */ /* ───────────────────────────────────────────────────────────────────── 3. SPACING (Phase 1 v2 §2.3) ───────────────────────────────────────────────────────────────────── sovereign.css already declares --space-1..10 (4/8/12/16/24/32/48/64/96/128). Phase 1 §2.3 commits to re-use that scale. The aliases below are SEMANTIC ROLES that reference the existing scale; flight-deck components use the role aliases, not raw --space-N. This keeps the existing scale as single source of truth (separability constraint #2: tokens viewport-background-independent — role names also stay viewport-independent). */ --space-page-padding: var(--space-7); /* 48px — mockup uses 40-48px page sides */ --space-section-gap: var(--space-7); /* 48px between page sections (hero→spine→body) */ --space-grid-gap: var(--space-6); /* 32px column-gap (3-col body in today-v2) */ --space-inter-item-gap: var(--space-3); /* 12px between mission cards / lane cards */ --space-inline-gap: var(--space-5); /* 24px horizontal flex (top-bar items, hero meta) */ --space-component-padding: var(--space-4); /* 16px inside cards / panels */ --space-border-thin: 1px; /* default panel/line edge */ --space-border-thick: 2px; /* priority-edge, progress-ribbon, focus outline */ --space-micro: 2px; /* hairline-adjacent micro-gap */ /* ───────────────────────────────────────────────────────────────────── 4. MOTION (Phase 1 v2 §2.4) ───────────────────────────────────────────────────────────────────── 3 animations. Stagger grammar named in philosophy §5.6. Easing pulled from mockup keyframes (consistent across all 3). prefers-reduced-motion override at bottom of file. */ --motion-stagger-base: 60ms; /* observed today-v2 first delay */ --motion-stagger-step: 60ms; /* observed step between delays (60→120→180→260...) */ --motion-stagger-max-stages: 6; /* before stagger flattens — observed max 380ms ≈ 6 steps */ --motion-duration-rise-in: 500ms; /* 500-600ms in mockups; settle on 500 (tasks/roadmap) */ --motion-duration-blink: 1600ms; /* 1.6s infinite */ --motion-duration-slide-in: 600ms; /* roadmap sprint-detail swap */ --ease-flightdeck: cubic-bezier(0.2, 0.7, 0.2, 1); /* ───────────────────────────────────────────────────────────────────── 5. GRADIENT (Phase 1 v2 §2.5) ───────────────────────────────────────────────────────────────────── 3 semantic + 2 atmosphere. Atmosphere kept under the §5.5 sub-5% contrast constraint (the grid-texture wraps the bone color at 0.035 opacity per mockup; atmosphere consumers carry the opacity in the container, not in the gradient stop). NOTE on alpha syntax: var() inside rgba() doesn't work portably with hex tokens. Where mockups used `${c.amberDim}40` (alpha hex suffix), this file uses the same approach by inlining the hex with alpha suffix. Components that need alpha variants of bone/canvas should declare the variant locally; Wave 2 may add bone-alpha-* tokens if repeated. */ --gradient-past-band: linear-gradient(90deg, transparent, #7A5F2E40); --gradient-progress-fill: linear-gradient(90deg, var(--color-done-green), var(--color-amber-urgent)); --gradient-flight-card-glow: linear-gradient(90deg, var(--color-amber-urgent), transparent); --gradient-oracle-atmosphere: linear-gradient(165deg, var(--color-panel-hi), var(--color-panel)); --gradient-grid-texture: linear-gradient(#F4F1EA 1px, transparent 1px), linear-gradient(90deg, #F4F1EA 1px, transparent 1px); /* ───────────────────────────────────────────────────────────────────── 6. ELEVATION / SHADOW (Phase 1 v2 §2.6) ───────────────────────────────────────────────────────────────────── 2 shadows. amber-glow is single-layer (today now-marker, roadmap active progress-ribbon). focus-glow is 3-layer (bg-ring + node-ring + outer-bloom — selected sprint node in roadmap-v2; reusable for keyboard focus on equivalent emphasis). */ --shadow-amber-glow: 0 0 12px var(--color-amber-urgent); --shadow-focus-glow: 0 0 0 4px var(--color-canvas), 0 0 0 5px var(--color-amber-urgent), 0 0 18px var(--color-amber-urgent); /* ───────────────────────────────────────────────────────────────────── 7. FOCUS-STATE (Phase 1 v2 §2.7 — NEW category) ───────────────────────────────────────────────────────────────────── Color = cyan to inherit review-state semantic per §2.7 recommendation. AA contrast: cyan #6FD3C7 on canvas #0A0B0D ≈ 11.5:1 (passes AA-large and AA-normal at all sizes). On panel #111316: ≈ 11.0:1 (passes). Width 2px matches priority-edge / progress-ribbon thickness for register coherence. Offset 2px avoids clipping against component border. Style solid; :focus-visible (NOT :focus) to suppress mouse-click rings. The :focus-visible rule below applies globally; components may opt OUT by declaring outline:none on :focus-visible AND providing an equivalent visible alternative (Wave 2 components must do this if they need a different focus treatment). */ --focus-outline-color: var(--color-cyan); --focus-outline-width: 2px; --focus-outline-offset: 2px; --focus-outline-style: solid; /* ───────────────────────────────────────────────────────────────────── 8. RESPONSIVE (Phase 1 v2 §5) ───────────────────────────────────────────────────────────────────── Informational token. Wave 4 builds the mobile interstitial component; Wave 1 publishes the floor so Wave 2 components can assume it. */ --viewport-min: 1280px; } /* ───────────────────────────────────────────────────────────────────── Named animations — declared inside @layer tokens so they ship with the token contract. Wave 3 will add a CI check enforcing paired reduced- motion overrides on any new @keyframes. ───────────────────────────────────────────────────────────────────── */ @keyframes flightdeck-rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes flightdeck-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.2; } } @keyframes flightdeck-slide-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } /* ───────────────────────────────────────────────────────────────────── Global :focus-visible — applies to any element not opting out. Per separability amendment constraint #4: tokens, not Sovereign-scoped classes, define interactive affordances. ───────────────────────────────────────────────────────────────────── */ :focus-visible { outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color); outline-offset: var(--focus-outline-offset); } } /* ============================================================================ @layer utilities — Named utility classes bridging tokens to Jinja ============================================================================ Wave 1 utilities are TYPE / COLOR / EDGE / AMBIENT-USAGE only. Component classes (mission-card, oracle, sprint-node, kanban-lane, etc.) are Wave 2. Decision recorded in separability audit: utilities live in this file (not a separate flightdeck-utilities.css) because they are token bridges, not component code, and shipping in one cascade-layer-aware file keeps load order trivially correct. ============================================================================ */ @layer utilities { /* ── Typography ──────────────────────────────────────────────────────── */ .type-hero { font-family: var(--font-display-flightdeck); font-style: italic; font-weight: 400; font-size: var(--type-hero); line-height: var(--lh-tight-hero); letter-spacing: var(--ls-hero-negative); } .type-title { font-family: var(--font-display-flightdeck); font-style: italic; font-weight: 400; font-size: var(--type-title); line-height: var(--lh-tight-title); letter-spacing: var(--ls-hero-negative); } .type-subtitle { font-family: var(--font-display-flightdeck); font-weight: 400; font-size: var(--type-subtitle); line-height: var(--lh-display-prose); letter-spacing: var(--ls-normal); } .type-primary-display { font-family: var(--font-display-flightdeck); font-weight: 400; font-size: var(--type-primary-display); line-height: var(--lh-tight-display-value); letter-spacing: var(--ls-normal); } .type-body { font-family: var(--font-mono-flightdeck); font-weight: 400; font-size: var(--type-body); line-height: var(--lh-body-default); letter-spacing: var(--ls-body-plus); } .type-body-mono { font-family: var(--font-mono-flightdeck); font-weight: 400; font-size: var(--type-body-mono); line-height: var(--lh-body-default); letter-spacing: var(--ls-micro); } .type-label { font-family: var(--font-mono-flightdeck); font-weight: 400; font-size: var(--type-label); line-height: var(--lh-medium-title); letter-spacing: var(--ls-label); text-transform: var(--text-transform-label); } /* ── Color ───────────────────────────────────────────────────────────── */ .text-bone { color: var(--color-bone); } .text-dim { color: var(--color-dim); } .text-dimmer { color: var(--color-dimmer); } .text-amber-urgent { color: var(--color-amber-urgent); } .text-cyan { color: var(--color-cyan); } .text-rust { color: var(--color-rust); } .text-done-green { color: var(--color-done-green); } .bg-canvas { background: var(--color-canvas); } .bg-panel { background: var(--color-panel); } .bg-panel-hi { background: var(--color-panel-hi); } /* ── Border thickness ────────────────────────────────────────────────── */ /* Color/style left to component author; these set thickness only. */ .edge-thin { border-width: var(--space-border-thin); } .edge-thick { border-width: var(--space-border-thick); } /* ── Amber ambient — usage class per §8.1 disposition ────────────────── */ /* Apply alongside .text-amber-urgent / .bg-amber-urgent: the SAME hex animated to ambient. Composable with the urgent color, not a second hex. Optional opacity-shoulder may be applied at component level. */ .is-ambient { animation: flightdeck-blink var(--motion-duration-blink) infinite; } } /* ============================================================================ prefers-reduced-motion — philosophy §3.1 commitment ============================================================================ Wave 3 builds the CI check that fails if any new @keyframes lacks a paired override. Wave 1 honors the commitment in this file by zeroing stagger tokens AND disabling the three named animations. Components that use the .is-ambient utility or .rise/.slide classes (Wave 2) will inherit the disabled state. ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --motion-stagger-base: 0ms; --motion-stagger-step: 0ms; --motion-stagger-max-stages: 0; --motion-duration-rise-in: 0ms; --motion-duration-blink: 0ms; --motion-duration-slide-in: 0ms; } /* Disable named animations. Components that compose other animations should declare their own paired override per Wave 3 CI rule. */ @keyframes flightdeck-rise-in { from, to { opacity: 1; transform: none; } } @keyframes flightdeck-blink { from, to { opacity: 1; } } @keyframes flightdeck-slide-in { from, to { opacity: 1; transform: none; } } .is-ambient { animation: none; } }