/* ============================================================ AUSTIN TOLLS — design tokens · v1.0 · "Violet Crown" Derived from the Pennybacker badge mark. Pure tokens only — component recipes live in the design system doc and the styleguide reference implementation. ------------------------------------------------------------ Themes: dusk (flagship, dark) and day (light). Apply with or data-theme="day". On the website that attribute is resolved before first paint from the reader's `prefers-color-scheme`, or from their stored override where they have set one — see static/js/theme.js. Dusk is what :root carries, so it is also what a reader whose browser never runs that script still sees. ============================================================ */ :root { /* ---- core palette ---- */ --at-violet-900: #17102B; /* Midnight — dusk page background */ --at-violet-800: #211741; /* dusk surface */ --at-violet-700: #2A1F52; /* dusk raised surface */ --at-violet-600: #372A5C; /* dusk border */ --at-violet-500: #452A75; /* Crown Violet — brand */ --at-violet-400: #6E4BB8; --at-violet-300: #9C7BE0; --at-violet-200: #C9B6F2; --at-violet-100: #EDE6FB; --at-ink: #241A3E; /* Ink Plum — text on light, text on amber */ --at-silhouette: #1D1433; /* illustration silhouettes */ --at-amber-600: #E89A0C; --at-amber-500: #FFB020; /* Signal Amber — the TOLL plate */ --at-amber-400: #FFC553; --at-ember: #FF8A3D; /* Sunset Ember — gradient warm end */ --at-rose: #B14E77; /* Dusk Rose — gradient mid, sparing accent */ --at-limestone: #FAF7F1; /* day background / dusk text */ --at-white: #FFFFFF; --at-sand: #E8E1D2; /* day border */ --at-coral-400: #FF7A5C; /* rate up, dusk */ --at-coral-600: #C2451E; /* rate up, day */ --at-mint-400: #4EC9A4; /* rate down, dusk */ --at-mint-600: #0B7A59; /* rate down, day */ /* ---- brand gradient (hero moments only — one per view) ---- */ --at-dusk-gradient: linear-gradient(180deg, #2A1950 0%, #55307F 45%, #B14E77 75%, #FF8A3D 100%); /* ---- typography ---- */ --at-font-sans: "Overpass", "Segoe UI", system-ui, sans-serif; --at-font-mono: "Overpass Mono", ui-monospace, "SF Mono", monospace; --at-text-display: 800 clamp(2.125rem, 5vw, 3.25rem)/1.05 var(--at-font-sans); --at-text-h1: 800 2rem/1.15 var(--at-font-sans); --at-text-h2: 800 1.5rem/1.2 var(--at-font-sans); --at-text-h3: 600 1.1875rem/1.3 var(--at-font-sans); --at-text-body: 400 1rem/1.6 var(--at-font-sans); --at-text-small: 400 0.875rem/1.5 var(--at-font-sans); --at-text-caption: 600 0.78125rem/1.3 var(--at-font-sans); /* + uppercase, tracked */ --at-text-rate-lg: 700 1.75rem/1.1 var(--at-font-mono); /* + tabular-nums */ --at-text-rate: 600 1.125rem/1.2 var(--at-font-mono); /* + tabular-nums */ --at-tracking-caption: 0.06em; --at-tracking-plate: 0.1em; /* text inside amber plates */ /* ---- space (4px base) ---- */ --at-space-1: 4px; --at-space-2: 8px; --at-space-3: 12px; --at-space-4: 16px; --at-space-5: 24px; --at-space-6: 32px; --at-space-7: 48px; --at-space-8: 64px; /* ---- radius ---- */ --at-radius-sm: 8px; /* inputs, tags */ --at-radius-md: 14px; /* THE PLATE — buttons, pills, cards' inner chips */ --at-radius-lg: 22px; /* cards, sheets, tiles */ --at-radius-round: 999px; /* ---- motion ---- */ --at-dur-fast: 150ms; --at-dur: 300ms; --at-ease: cubic-bezier(0.2, 0.7, 0.3, 1); } /* ============================================================ DUSK — flagship theme (dark). The brand's native light. ============================================================ */ :root, [data-theme="dusk"] { --at-bg: var(--at-violet-900); --at-surface: var(--at-violet-800); --at-surface-raised: var(--at-violet-700); --at-border: var(--at-violet-600); --at-text: var(--at-limestone); --at-text-muted: #B7ACD4; --at-text-faint: #8A7DA8; --at-accent: var(--at-amber-500); --at-accent-hover: var(--at-amber-400); --at-on-accent: var(--at-ink); --at-link: var(--at-violet-200); --at-focus-ring: 0 0 0 3px rgba(255, 176, 32, 0.4); --at-rate-up: var(--at-coral-400); --at-rate-down: var(--at-mint-400); --at-shadow: none; /* dusk depth = borders, not shadows */ --at-scrim: rgba(23, 16, 43, 0.72); } /* ============================================================ DAY — light theme ("Limestone"). ============================================================ */ [data-theme="day"] { --at-bg: var(--at-limestone); --at-surface: var(--at-white); --at-surface-raised: var(--at-white); --at-border: var(--at-sand); --at-text: var(--at-ink); --at-text-muted: #6E6386; --at-text-faint: #948CA6; --at-accent: var(--at-amber-500); --at-accent-hover: var(--at-amber-600); --at-on-accent: var(--at-ink); --at-link: var(--at-violet-500); --at-focus-ring: 0 0 0 3px rgba(69, 42, 117, 0.35); --at-rate-up: var(--at-coral-600); --at-rate-down: var(--at-mint-600); --at-shadow: 0 2px 8px rgba(36, 26, 62, 0.08), 0 8px 24px rgba(36, 26, 62, 0.06); --at-scrim: rgba(36, 26, 62, 0.4); } @media (prefers-reduced-motion: reduce) { :root { --at-dur-fast: 0ms; --at-dur: 0ms; } }