/* ============================================================ THE AUTOVERSE — Design Tokens (Design → DevOps handoff, rev r6) Single source of truth for radius, type, spacing, color. Load this BEFORE page styles. In the production CSS build, these become the base layer; until then, this file can be included via in . ============================================================ */ :root { /* ---- Radius scale (collapsed from ~22 ad-hoc values to 4) ---- */ --r-sm: 8px; /* chips, tags, tooltips, inline controls */ --r-md: 14px; /* cards, panels, menus, inputs */ --r-lg: 20px; /* hero / banner containers, large surfaces */ --r-pill: 999px; /* buttons, badges, the guide FAB */ /* ---- Type scale (7 steps) ---- */ --t-2xs: 0.7rem; /* eyebrows, captions, footer meta */ --t-xs: 0.8rem; /* secondary labels */ --t-sm: 0.9rem; /* UI text, nav */ --t-base: 1.05rem; /* body copy (unchanged reading size) */ --t-lg: 1.25rem; /* sub-headings */ --t-xl: 2rem; /* section headings */ --t-display: 3.5rem; /* hero (Playfair) */ /* ---- Spacing (4px base) ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; /* ---- Color (documents the values already in use) ---- */ --c-accent: #0ea5e9; /* sky — primary accent */ --c-accent-strong: #0284c7; /* hover/pressed accent */ --c-accent-deep: #0369a1; /* accent text on light */ --c-accent-soft: #7dd3fc; /* accent in dark mode */ --c-accent-tint: #e0f2fe; /* active-state pill background (light) */ --c-heading: #1e3a5f; /* navy headings */ --c-emerald: #34d399; /* sparing positive / live dot */ /* ---- Reading measure ---- */ --measure: 820px; } /* ------------------------------------------------------------ CTA vs. "you are here" (P2) Active = the page you are ON (sky text + tint pill). CTA = an invitation to go somewhere (accent-outline button). These MUST look different so "active" reliably means "current page." ------------------------------------------------------------ */ .nav-cta { color: var(--c-accent-deep); border: 1.5px solid var(--c-accent); background: transparent; padding: 0.45rem 0.9rem; border-radius: var(--r-pill); font-weight: 600; transition: background .12s, color .12s, border-color .12s; } .nav-cta:hover { background: var(--c-accent); color: #fff; border-color: var(--c-accent); } html.dark .nav-cta { color: var(--c-accent-soft); border-color: var(--c-accent-soft); } html.dark .nav-cta:hover { background: var(--c-accent-soft); color: #0b1120; } /* Active state is reserved for the current page ONLY (not the CTA). */ .nav-active { color: var(--c-accent) !important; background: var(--c-accent-tint); } html.dark .nav-active { color: var(--c-accent-soft) !important; background: #0c2840; }