/* ============================================================ CARAVAN DESIGN SYSTEM · tokens "Cosmic Wonderland / Cosmic Field Kit" — the single source of design truth. Change values HERE; the app never hardcodes them. Synced to Claude Design ("Caravan Design System" project). ============================================================ */ :root { /* --- ground --- */ --void: #0A0B14; /* page background — deep space, never pure black */ --surface: #12141F; /* cards, panels */ --raise: #181B2A; /* raised elements: buttons, inputs */ --inset: #0D0F1A; /* wells: quotes, meters, grids */ --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.12); --scrim: color-mix(in srgb, var(--void) 72%, transparent); /* behind sheets */ /* --- ink --- */ --ink: #EDEFF7; --dim: #9BA3BC; /* secondary text — indigo-biased grey, never neutral */ --faint: #7C84A2; /* labels, metadata — WCAG AA (4.6:1) on the worst ground, --raise */ /* Ground ladder = elevation. Dark UI can't use shadow (invisible on black), so LUMINANCE carries depth: void < inset < surface < raise. Never invent an intermediate value — pick a rung. */ /* --- aurora (live/actionable ONLY — never decoration) --- */ --teal: #4EEAD4; /* signature brand color */ --violet: #8B7CF6; --magenta: #F472B6; --gold: #F5D07E; /* stardust — countdowns, important callouts */ --aurora: linear-gradient(90deg, var(--teal), var(--violet) 55%, var(--magenta)); /* --- semantic status (state, never accent) --- */ --ok: #34D399; /* secured / confirmed */ --warn: #FBBF24; /* pending / hunting / stale */ --bad: #FB7185; /* gap / blocker / needs help */ /* --- type --- */ --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, "Cascadia Code", monospace; /* roles: display = sans 750-800 tight; body = sans 400/600; data (times, counts, money, labels) = mono — the "mission control" voice */ /* --- type scale (every font-size in ui.css comes from here) --- */ --fs-3xs: 9.5px; /* orientation bars — the smallest legible tracked mono */ --fs-2xs: 10px; /* labels (.k), dividers, tabs, avatar initials */ --fs-xs: 11px; /* pills, meta, provenance, countdown */ --fs-sm: 12px; /* secondary reading (.body-dim, .quote), small buttons */ --fs-md: 13px; /* buttons, compact titles (.title-xs), errors */ --fs-title: 14px; /* card titles (.title-sm) */ --fs-body: 15px; /* the reading voice */ --fs-lg: 18px; /* appbar / screen titles */ /* --- shape & rhythm --- */ --r-card: 16px; --r-btn: 11px; --r-pill: 999px; --gap-xs: 6px; --gap-sm: 8px; --gap: 12px; --pad: 14px; --tabbar-clear: 90px; /* screen-body bottom padding that clears the fixed tabbar */ /* --- motion --- */ --dur: 150ms; --ease: cubic-bezier(.2, .7, .3, 1); /* --- glow (recently-updated cards; ambient, not badges) --- */ --glow-live: 0 0 18px color-mix(in srgb, var(--teal) 10%, transparent); --border-live: color-mix(in srgb, var(--teal) 35%, transparent); } /* ============================================================ PER-EVENT THEMING Override tokens ONLY — never component CSS. Because every tint, edge, glow, scrim, meter, and starfield dot in ui.css derives from these values via color-mix, eleven overrides re-skin the entire app. Apply with . ============================================================ */ /* "Playa" — desert dusk instead of deep space. Proof the derivation holds: nothing below this line touches a component, yet cards, pills, tiles, sheets, meters, the wordmark, and the starfield all follow. */ [data-event-theme="playa"] { --void: #14100C; /* dusk over dust — still never pure black */ --surface: #1F1913; --raise: #2A2118; --inset: #100D09; --ink: #F6EFE4; --dim: #BCA894; /* warm-biased grey, never neutral */ --faint: #8A7663; --teal: #E8A33D; /* the "signature" slot becomes low sun */ --violet: #C2683C; --magenta: #E4557C; --gold: #F2D48A; }