/* ============================================================================= SOUL PILOT — DESIGN TOKENS frontend/css/tokens.css Single source of truth for all design variables. Extracted verbatim from prototype/your_crew.html (April 19 2026 palette). Shared across all three shells (marketing, artifact, chamber). DO NOT edit color values here without a deliberate token revision session. Reference: prototype/your_crew.html, knowledge docs/28_design_principles.md ============================================================================= */ :root { /* ── COLOR — Ocean ── */ --ocean-void: #080c16; /* page background, deepest layer */ --ocean-deep: #0d1220; /* nocturnal card left panel */ --ocean-mid: #111829; /* card right panel background */ --ocean-surface: #1a2438; /* diurnal card left panel */ --ocean-rim: #243048; /* borders, dividers */ /* ── COLOR — Horizon ── * The horizon ramp is the nocturnal-sect parallel to the gold ramp, * lifted one luminance step higher because horizon sits on darker * ocean substrates and needs more brightness to maintain hierarchy * parity with gold's solar-sect register. Tier mapping (locked * 2026-05-22 with Daljeet during the global sect color extension): * * Tier A (naming pills, dimension chips, sect glyph) * gold: --gold-bright #e8c97a * horizon: --horizon-whisper #d4e8f4 ← lifted above gold-bright * * Tier B (keyword pills — element keywords + sign LIGHT keywords) * gold: --gold-mid #c9a84c * horizon: --horizon-bright #a8d0e8 ← lifted to gold-bright luminance * * Tier C (sign SHADOW keywords — text on cooler substrate) * gold: --parchment-deep #8a7355 (on cooler-brown substrate) * horizon: --horizon-deep #7090b0 (on cooler-blue substrate) * * Starting values below are calibration targets; refine on screen. */ --horizon-glow: #2a4060; /* subtle glow, section-label line */ --horizon-mid: #4a7090; /* panel headings, muted labels */ --horizon-deep: #7090b0; /* Tier C shadow text (lunar sign) */ --horizon-text: #8ab8d4; /* nav links, eyebrows, captions */ --horizon-bright: #a8d0e8; /* Tier B keyword (lunar element/sign-light) */ --horizon-whisper: #d4e8f4; /* Tier A naming (lunar dimension chip) */ /* ── COLOR — Gold ── */ --gold-deep: #9a7528; /* glyph watermarks, ornament stars */ --gold-mid: #c9a84c; /* nav active, planet names, CTAs */ --gold-bright: #e8c97a; /* highlight, hover emphasis */ --gold-whisper: #f2e4b8; /* wordmark, planet name large text */ /* ── COLOR — Parchment ── */ --parchment-deep: #8a7355; /* muted badge text, captions */ --parchment-mid: #c4a97d; /* body prose color */ --parchment-light: #e8d5a3; /* stronger prose, hood values */ --parchment-pale: #f5ead0; /* maximum prose brightness */ /* ── COLOR — Semantic ── */ --danger: #8b3a3a; --danger-bright: #c45c5c; /* strained / contest / error */ --success: #3a6b4a; --success-bright: #5a9b6a; /* strong / in sect / support */ /* ── COLOR — Stars ── */ --star-bright: rgba(220, 230, 255, 0.85); --star-dim: rgba(200, 210, 255, 0.30); /* ── LIBRARY — derived surface rules (shared with design reference) ── Used by Surface 3 components: lexicon entries, plates, cards, badges. Match the --lib-* tokens defined in Design Language.html so CSS from the reference can be ported without token substitution. */ --lib-rule: rgba(201, 168, 76, 0.42); /* structural gold border */ --lib-rule-soft: rgba(201, 168, 76, 0.18); /* soft gold divider */ --lib-rule-faint: rgba(201, 168, 76, 0.10); /* faint gold tint */ --lib-edge: rgba(36, 48, 72, 0.55); /* panel/badge border */ --lib-edge-soft: rgba(36, 48, 72, 0.32); /* softer panel border */ --lib-card-bg: rgba(13, 18, 32, 0.55); /* card / aside background */ --lib-card-bg-dim: rgba(8, 12, 22, 0.55); /* deeper card background */ /* ── COLOR — Zodiac (Astrolab21 brand palette) ── Bespoke 12-sign chromatic-wheel sequence authored by Daljeet for the Astrolab21 brand. Used by the chart wheel renderer (threshold_4) for the outer color band, and reusable wherever a future surface needs sign-specific coloring (e.g., crew cards, journey chambers, lexicon entries pegged to a sign). The sequence reads as a continuous spectrum around the zodiac — fire-range deep red into red-orange, warming into ochre at Virgo, transitioning olive→green→Sag, then a clean color-shift into the cool blue range at Capricorn through deep teal-blue at Pisces. DO NOT edit these hex values without Daljeet's approval — they are part of the brand identity, not a design-iteration surface. */ --zodiac-aries: #841313; --zodiac-taurus: #3A0909; --zodiac-gemini: #882013; --zodiac-cancer: #9E3F17; --zodiac-leo: #BB640E; --zodiac-virgo: #B37E2A; --zodiac-libra: #A6A538; --zodiac-scorpio: #706F26; --zodiac-sagittarius: #3F7A43; --zodiac-capricorn: #4BB3D2; --zodiac-aquarius: #7399BF; --zodiac-pisces: #2C687A; /* ── TYPOGRAPHY ── */ --font-display: 'Cinzel Decorative', 'Cinzel', serif; --font-heading: 'Cinzel', serif; --font-body: 'Lora', Georgia, serif; --font-ui: 'Inter', system-ui, sans-serif; /* ── TYPOGRAPHY — body scale (locked 2026-05-14) ── Single source of truth for chamber body text size and line-height. 17px / 1.25 across all Surface 2 and Surface 3 chamber prose. The Oracle ceremony's elevation register comes from italic + parchment- light color, not from size differential. The earlier May 8 ratchet to 20px / 1.5 was a transitional state required by EB Garamond's legibility floor; once Lora became the body face, the larger size was no longer needed and reads out of proportion. Exceptions (do NOT consume these tokens): Lift prose — .c-invite-lift @ 22px / 1.45 (declarative italic) Lead-block prose — .c-invite-arrival p @ 18px / 1.25 (scene-setting) Callout prose — .c-invite-callout-key @ 28px display Threshold question — .c-invite-threshold-q @ clamp(40-64px) display Surface 1 marketing — 18-20px / 1.5 (distinct reader register) If the Oracle reads small after browser test, the cleanest bump is `--type-body-size: 18px` here — every consuming rule lifts at once. */ --type-body-size: 17px; --type-body-line: 1.25; /* ── TYPOGRAPHY — reading-title scale (width-pegged) ── Promoted from claude-design-threshold-4-1.html (V4 elevation pass, May 2 2026). Width-pegged clamps for the .reading-title family — same heading family rendered at three scales selected by the column it sits in, not by what the heading says. T4 uses all three: --reading-page → .chart-title (page H1, full-width) --reading-wide → Oracle card heading (near-full-width column) --reading-narrow → .chart-rcol-heading (narrow right column) The atomicity belongs in tokens because future surfaces will adopt the same family and need the same scale options. */ --reading-narrow: clamp(22px, 2.6vw, 30px); --reading-wide: clamp(30px, 3.4vw, 44px); --reading-page: clamp(44px, 6vw, 76px); /* ── MOTION ── */ --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-unfurl: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* chamber transitions, 1.6s */ /* Motion durations — override with reduced-motion below */ --dur-chamber: 1.6s; /* chamber entry/exit unfurl */ --dur-para: 2.8s; /* paragraph reveal interval */ --dur-oracle: 8s; /* Oracle tuning ceremony duration */ --dur-slot: 0.7s; /* slot install animation */ --dur-rail: 280ms; /* rail expand/collapse */ --dur-fast: 200ms; /* hover transitions */ /* ── LAYOUT ── */ --content-max: 1200px; /* ── PHASE 1+ CHAMBER COLUMN WIDTHS ── Governing widths for the Surface 3 journey chambers. These are the canonical max-widths — each chamber layout references the appropriate token rather than hardcoding px values. Reading column (920px): Unified width for Preamble, Invite, Teaching, Reflection prose. Structured as: 160px left annotation zone + 40px gap + 720px body when the folio layout is active. Single-column chambers simply fill the full 920px container with prose capped at ~60ch. Reveal card (1160px): The planet-disclosure card. Intentionally wider than the reading column — the most visually significant moment in each phase. 30/70 split: ~348px left identity panel / ~812px right reading panel. Uses min(var(--phase-col-reveal), 90vw) at the element level. Responsive collapse contract (all Phase 1+ chamber layouts): 1100px existing threshold geometry collapse (already handled) 960px reveal card 30/70 → single column stack 768px folio annotation column hides / stacks above prose 720px reading column padding tightens, lede font reduces 640px shell mobile tightening (already handled in shell.css) */ --phase-col-reading: 920px; --phase-col-reveal: 1160px; /* ── CHART WHEEL — RING RADIUS GEOMETRY ── Token-driven radii for the threshold_4 chart wheel renderer (Phase E, May 2026). Values are SVG viewBox units assuming a -100..100 wheel coordinate space (200 unit canvas, full radius = 100). Tuning these adjusts ring proportions without JS edits. Ring stack outside-in: Color ring r = (--wheel-r-bounds-outer) → (--wheel-r-color-outer) Bounds ring r = (--wheel-r-planet-outer) → (--wheel-r-bounds-outer) Planet zone r = (--wheel-r-planet-inner) → (--wheel-r-planet-outer) House numbers r ≈ (--wheel-r-center) + small offset (floating labels) Empty center r = 0 → (--wheel-r-center) Reference: project_v4_elevation_landed.md → next session is chart artifact rendering. First-pass numbers; expect visual tuning during Phase C build against the four test fixtures + Pittsfield. */ --wheel-r-color-outer: 100; /* outer rim of the color ring */ --wheel-r-bounds-outer: 89.5; /* v5: 87 → 89.5 — color band narrowed 20% per Daljeet */ --wheel-r-planet-outer: 81.5; /* v6: 78 → 81.5 — bounds ring narrowed to ~75% of color band width (8 vs 10.5) */ --wheel-r-planet-inner: 20.8; /* v5: 20 → 20.8 — spokes terminate AT innermost circle (numberR − 3.2) instead of poking past it */ --wheel-r-center: 20; /* radius of the empty center circle */ /* ── SURFACE 3 — CHAMBER SHELL GEOMETRY ── */ --meridian-height: 56px; --rail-collapsed: 64px; --rail-expanded: 248px; /* Medallion overhang — the rail DOM is wider than its visible body by this amount. The visible body (gradient bg + gold left-line) is right-aligned in the rail box, leaving the leftmost --rail-overhang of the rail as a transparent zone where the medallion's left half can render past the visible body's left edge. The medallion's center sits exactly on the visible body's left edge. */ --rail-overhang: 18px; /* --phase-path-height retired in C4.i (May 8 2026) — the secondary eyebrow under the brand strip was removed when path-label chrome was dropped. Chamber stage now offsets only by --meridian-height. */ /* ── Z-INDEX SCALE ── */ --z-atmosphere: 0; --z-chamber: 10; --z-rail: 20; --z-meridian: 30; --z-side-chamber: 40; --z-overlay: 50; } /* ── REDUCED MOTION — override timing tokens ── */ @media (prefers-reduced-motion: reduce) { :root { --dur-chamber: 0ms; --dur-para: 0ms; --dur-oracle: 2s; /* compress ceremony; framing preserved */ --dur-slot: 0ms; --dur-rail: 0ms; --dur-fast: 0ms; } } /* ── BASE RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--ocean-void); color: var(--parchment-mid); font-family: var(--font-body); font-size: 17px; line-height: 1.25; -webkit-font-smoothing: antialiased; } body { min-height: 100vh; } /* ── FORCED COLORS — high contrast fallback ── */ @media (forced-colors: active) { :root { --ocean-void: Canvas; --parchment-mid: CanvasText; --gold-mid: CanvasText; --horizon-text: CanvasText; } }