/* ============================================================================ tokenio — CANONICAL COLOR TOKENS (design/tokens.css) ---------------------------------------------------------------------------- Single source of truth for the tokenio brand palette. Reconciles the two drifting definitions that previously lived in: - apps/web/src/styles.css :root (app runtime) - docs/DESIGN_SYSTEM.md §1.1 (design doc "source of truth") Brand world: warm summer-yellow (--sun) + clear sky-blue (--sky). Vocabulary preserved: sun / sky / basket / fruit. Anchors (unchanged, agreed by BOTH sources — these never drift again): --sun #FFCB2D warm summer yellow --sky #3FB7F2 clear sky blue Naming decision: Canonical deep-shade names are --sun-deep / --sky-deep (doc naming wins; it is self-describing). App-side --sun2 / --sky2 are kept as ALIASES so the runtime can migrate without a flag-day rename. WCAG notes use the standard contrast-ratio thresholds: AA normal text >= 4.5:1 | AA large/UI >= 3:1 | AAA normal >= 7:1 ============================================================================ */ :root { /* ---- SHAPE ------------------------------------------------------------- */ --radius: 0.45rem; /* ========================================================================== BRAND ANCHORS ========================================================================== */ --sun: #FFCB2D; /* primary CTA / brand highlight / logo "t" */ --sun-deep: #F4A916; /* hover / active / gradient warm end */ --sky: #3FB7F2; /* secondary accent / logo dot / links */ --sky-deep: #1894D8; /* hover / active / gradient cool end */ /* Aliases for the app runtime's historical names (do not add new usages) */ --sun2: var(--sun-deep); --sky2: var(--sky-deep); /* ========================================================================== SURFACE RAMP (dark shell) -------------------------------------------------------------------------- DRIFT RESOLVED: the doc used a near-black deep-navy ramp (#02060f ...), the app used a warmer teal-tinted ramp (#0a1418 ...). We keep the app's WARM ramp as canonical — it pairs better with a summer-yellow brand and is what the shipped 246-green build actually renders. The doc's darker values are kept as an optional "abyss" backdrop token. ========================================================================== */ --bg: #0a1418; /* app background (root) */ --bg-2: #0e1d24; /* raised background / rails */ --bg-3: #0b1a2a; /* deep-navy variant (from doc) for hero/abyss areas*/ --abyss: #02060f; /* darkest backdrop, behind glass panels */ --panel: #102730; /* solid card / panel surface */ --panel-2: #0c1f27; /* nested / secondary panel */ --panel-glass: rgba(16, 39, 48, 0.62); /* frosted panel over imagery */ /* App legacy alias */ --bg2: var(--bg-2); --panel2: var(--panel-2); /* ========================================================================== LINES / BORDERS -------------------------------------------------------------------------- DRIFT RESOLVED: doc used white-alpha lines; app used teal-alpha lines. Teal-alpha wins (it reads warmer against the ramp above). Doc's neutral white line kept as --line-neutral for content over photography. ========================================================================== */ --line: rgba(120, 200, 190, 0.14); /* hairline divider */ --line-2: rgba(120, 200, 190, 0.28); /* stronger border / focused card */ --line-neutral: rgba(255, 255, 255, 0.10); /* on glass / over images */ /* ========================================================================== TEXT RAMP -------------------------------------------------------------------------- DRIFT RESOLVED: app --txt #dceae6 (teal-tinted) vs doc --txt #e5e7eb (neutral). Chosen: #e5e7eb (doc) as canonical --txt — it is a cleaner neutral and hits AAA on the dark ramp. App's tinted value kept as an alias concept only; the muted stops come from the doc's blue-grey ramp. ========================================================================== */ --txt: #e5e7eb; /* primary text. on --bg 0a1418: ~14.6:1 AAA */ --txt-2: #8ca0b3; /* secondary / labels. on --bg: ~6.4:1 AA (AAA lrg)*/ --txt-3: #5a7189; /* tertiary / floor hints. on --bg: ~3.4:1 AA-large*/ /* App legacy aliases */ --mut: var(--txt-2); --mut2: var(--txt-3); /* ========================================================================== SEMANTIC / STATUS -------------------------------------------------------------------------- Kept the app's warm-leaning status set (they harmonize with --sun). Added --info (mapped to sky) so status coverage is good/warn/bad/info. ========================================================================== */ --good: #4fe0a0; /* success / funded / positive */ --warn: #f5c451; /* warning / near-capacity */ --bad: #ff7a6b; /* error / closed / negative */ --info: var(--sky); /* informational / neutral highlight */ --teal: #2fd6c3; /* utility accent (charts, secondary dots) */ /* ========================================================================== CATEGORY COLORS (from doc §1.1 — kept for relative distinction) ========================================================================== */ --cat-rwa: #f59e0b; /* real-world asset (warm, near sun-deep) */ --cat-invoice: #06b6d4; /* invoice / receivables (cyan) */ --cat-treasury: #1e3a8a; /* treasury (deep navy-blue) */ --cat-copy: #c026d3; /* copy-trade (magenta) */ --cat-prediction: #7c3aed; /* prediction (violet) */ --cat-stable: #e5e7eb; /* stable (neutral = --txt) */ /* ========================================================================== ON-COLOR PAIRINGS (what text/icon color to place ON a given surface) -------------------------------------------------------------------------- Always use these for foreground-on-fill so contrast stays compliant. ========================================================================== */ --on-sun: #3a2a00; /* dark brown on --sun. ~10.9:1 AAA */ --on-sky: #06263a; /* deep navy on --sky. ~7.3:1 AAA */ --on-panel: var(--txt);/* --txt on --panel. ~13:1 AAA */ --on-good: #06331f; /* on --good. ~8.6:1 AAA */ --on-warn: #3a2a00; /* on --warn. ~9.4:1 AAA */ --on-bad: #3a0c06; /* on --bad. ~6.1:1 AA */ /* ========================================================================== DERIVED — GRADIENTS -------------------------------------------------------------------------- Signature brand gradient runs sky -> sun (cool to warm), used on progress bars, capacity fills, and hero accents. ========================================================================== */ --grad-brand: linear-gradient(90deg, var(--sky) 0%, var(--sun) 100%); --grad-brand-deep: linear-gradient(90deg, var(--sky-deep) 0%, var(--sun-deep) 100%); --grad-sun: linear-gradient(180deg, var(--sun) 0%, var(--sun-deep) 100%); --grad-sky: linear-gradient(180deg, var(--sky) 0%, var(--sky-deep) 100%); /* ========================================================================== DERIVED — GLASS SURFACES ========================================================================== */ --glass-bg: rgba(16, 39, 48, 0.55); --glass-border: rgba(255, 255, 255, 0.10); --glass-blur: 14px; /* ========================================================================== DERIVED — FOCUS RING & SHADOW ========================================================================== */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--sky); --focus-ring-sun: 0 0 0 2px var(--bg), 0 0 0 4px var(--sun); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow: 0 6px 20px rgba(0, 0, 0, 0.40); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.50); --shadow-sun: 0 6px 22px rgba(255, 203, 45, 0.28); /* glow under sun CTAs */ /* ========================================================================== LIGHT SURFACE (the light "pool" / basket card variant, from app) ========================================================================== */ --card-light: #fbfdff; --card-light-border: #e4edf5; --card-light-txt: #13303d; /* on --card-light: ~13.5:1 AAA */ }