/* AgencyLadder — design tokens Source of truth: docs/DESIGN-SYSTEM.md §2–§7. The source design file has NO custom properties anywhere — every value below is being authored for the first time, named exactly as the contract names it. Do not add a token that isn't backed by a line in DESIGN-SYSTEM.md; do not invent a new hue (§5.1). Fluid sizes below are hand-derived `clamp()` curves that hit the documented mobile-390 and desktop-1280 pixel values EXACTLY at those two viewports (the standard fluid-type formula: slope = (max - min) / (maxVw - minVw), intercept = min - slope * minVw). This is what "type scales with clamp(), verified zero horizontal overflow at 390" (§4) requires in practice — no breakpoint, but the two audited endpoints still land on the documented number. */ :root { /* --------------------------------------------------------------------- 2. Color — core palette (14 tokens per the design system, +1 state color for the re-rank flash background that ships alongside them) --------------------------------------------------------------------- */ --page: #0A0A0B; /* app background; darker input-fill option */ --card: #141416; /* every panel, row, card, input, sheet */ --inset: #1D1D20; /* toasts, nested tiles, secondary-button hover fill */ --border: #26262A; /* default hairline; card borders, dividers, progress track */ --border-loud: #3F3F46; /* emphasised cards, inputs, outline buttons, dashed slots */ --text: #F4F4F5; /* headings, agency names, #1 figures, wordmark, leader rail */ --text-muted: #A1A1AA; /* body copy, descriptions, ranks 2–3, non-leader money */ --text-dim: #8A8A90; /* captions, footnotes, kickers, meta secondary, counters */ --text-faint: #71717A; /* rank numerals, rank 4+ */ /* --footer-muted — ODO-32, 2026-08-21. DESIGN-SYSTEM.md's own resolved-conflicts table rules "#D4D4D8 appears nowhere in the design file" (ship #A1A1AA instead) — that ruling covered board-row / top-agency-card muted text, which does render #A1A1AA. But #D4D4D8 (rgb(212,212,216)) DOES appear, live, computed-style-dumped straight off the running prototype at :8790, on every muted footer element: the descriptor line, the column kickers, the tribute-strip copy, and the legal line. Recorded here rather than silently reusing --text-muted for the footer and rather than silently overriding the existing ruling, which still holds for the surfaces it actually audited. Scoped to the footer ONLY — do not use it elsewhere. See DESIGN-SYSTEM.md §2 addendum. */ --footer-muted: #D4D4D8; --accent: #C6F24E; /* bid actions only — one filled element per card */ --accent-hover: #D6FF63; /* primary button hover fill */ --accent-ledge: #9CCB33; /* solid 2–3px ledge under filled buttons */ --accent-ink: #15200A; /* text on lime fills. Never #000 */ --decay: #FF5C4D; /* decay, declines, destructive, downward deltas */ --flash-card: #17171A; /* card background during the re-rank flash */ /* --------------------------------------------------------------------- 2. Color — composite / alpha values --------------------------------------------------------------------- */ --header-bg: rgba(10, 10, 11, .92); /* sticky header bar background */ --modal-backdrop: rgba(6, 6, 7, .78); /* modal scrim — HO value, preferred over the .72 in the mock */ --status-pill-fill: rgba(244, 244, 245, .08); /* status pill fill (RANK 01 · HOLDING) */ --decay-pill-fill: rgba(255, 92, 77, .10); /* decay pill fill */ --decay-pill-border: rgba(255, 92, 77, .32); /* decay pill border */ --decay-strip-fill: rgba(255, 92, 77, .08); /* decay callout strip fill */ --decay-strip-border: rgba(255, 92, 77, .28); /* decay callout border */ /* ── Podium (KING JOE, 2026-08-21) ───────────────────────────────────────────────────────── DESIGN-SYSTEM §5.6 read "No badge component, no medals, no gold" and ramped rank by --text / --text-muted / --text-faint. Overruled, and the product argument is CLAUDE.md's own: "Status is the more durable framing and the design should lean into it - shareable rank, an embeddable badge, a permalink an agency can put in a pitch deck." A #1 that is indistinguishable from a #4 in a screenshot is not that, and the screenshot IS the distribution. Scoped hard so this does not become a fourth hue running loose: these tint the RANK NUMERAL and the leader's rail, and nothing else. No medal icons, no coloured card fills beyond the leader's 5% wash. Lime remains the only colour an ACTION is ever allowed to use, so the CTA still wins the eye on a gold card. */ --medal-gold: #F5C74C; --medal-silver: #C9CDD4; --medal-bronze: #C98A5E; --medal-gold-wash: rgba(245, 199, 76, .05); --medal-gold-border: rgba(245, 199, 76, .38); --medal-gold-glow: 0 0 26px -10px rgba(245, 199, 76, .55); --decayed-card-border: rgba(255, 92, 77, .34); /* decayed-listing card border */ --flash-ring: rgba(198, 242, 78, .16); /* live flash outer ring */ --toast-shadow-color: rgba(0, 0, 0, .6); /* toast shadow */ /* --------------------------------------------------------------------- 3. Typography — font stacks --------------------------------------------------------------------- */ --font-sans: Inter, system-ui, sans-serif; --font-mono: "JetBrains Mono", monospace; /* --------------------------------------------------------------------- 3. Typography — fluid type scale Each fluid token is a clamp() authored to equal the documented "mobile 390" figure at a 390px viewport and the documented "desktop 1280" figure at a 1280px viewport, with no media query in between. --------------------------------------------------------------------- */ /* Hero headline — 25px/1.14 @390 -> 44px/1.08 @1280, tracking -.028em -> -.032em */ --fs-hero: clamp(25px, 16.674px + 2.135vw, 44px); --lh-hero: 1.1; --ls-hero: -0.03em; /* Wordmark — 13px @390 -> 15px @1280, tracking .14–.15em. Weight 800 lives ONLY here. */ --fs-wordmark: clamp(13px, 12.124px + 0.225vw, 15px); --ls-wordmark: .145em; /* Section heading — 19px -> 26px, tracking -.03em */ --fs-heading: clamp(19px, 15.933px + 0.787vw, 26px); --ls-heading: -0.03em; /* Agency name — 16px @390 -> 17px @1280 */ --fs-agency-name: clamp(16px, 15.562px + 0.112vw, 17px); /* Rank numeral — mobile CARD is actually larger (32px) than the desktop ROW (30px); the rail context (TOP AGENCY / leader hero) is a fixed 40px regardless of viewport. */ --fs-rank-card: clamp(30px, 32.876px - 0.225vw, 32px); --fs-rank-rail: 40px; --ls-rank: -0.04em; /* Money — row figure 21px @390 -> 22px @1280; stat and modal-hero are fixed contexts */ --fs-money-row: clamp(21px, 20.562px + 0.112vw, 22px); --fs-money-stat: 26px; --fs-money-modal: 64px; /* Body / description — single documented value, no mobile/desktop split */ --fs-body: 13.5px; --lh-body: 1.45; /* Meta / mono figures — 13px @390 -> 14px @1280 */ --fs-meta: clamp(13px, 12.562px + 0.112vw, 14px); /* Kicker / label — 12.5px uppercase Mono, one of the two 13px-floor exceptions */ --fs-kicker: 12.5px; --ls-kicker: .1em; /* Delta chip */ --fs-delta: 13px; /* Form */ --fs-form-label: 13px; --fs-form-value: 15px; --fs-form-helper: 13px; /* Buttons — primary/secondary each carry a row-size and a hero-size variant */ --fs-btn-primary-sm: 14px; --fs-btn-primary-lg: 17px; --fs-btn-secondary-sm: 13.5px; --fs-btn-secondary-lg: 15px; /* --------------------------------------------------------------------- 4. Spacing scale — hand-tuned, not a strict 4/8 grid --------------------------------------------------------------------- */ --space-4: 4px; --space-5: 5px; --space-6: 6px; --space-7: 7px; --space-8: 8px; --space-9: 9px; --space-10: 10px; --space-11: 11px; --space-12: 12px; --space-13: 13px; --space-14: 14px; --space-16: 16px; --space-17: 17px; --space-18: 18px; --space-20: 20px; --space-21: 21px; --space-22: 22px; --space-24: 24px; --space-26: 26px; --space-28: 28px; --space-32: 32px; --space-34: 34px; --space-40: 40px; --space-44: 44px; --space-48: 48px; /* --------------------------------------------------------------------- 4. Radii --------------------------------------------------------------------- */ --radius-meter: 3px; /* progress meter */ --radius-micro: 5px; /* micro-pill */ --radius-pill: 6px; /* pills / chips / avatar */ --radius-btn: 8px; /* buttons / callouts */ --radius-input: 9px; /* inputs / rail CTA */ --radius-card: 10px; /* cards / rows / toast */ --radius-rail: 12px; /* rail panels */ --radius-sheet: 18px 18px 0 0; /* bottom sheet */ --radius-chip: 22px; /* filter chips */ --radius-full: 50%; /* live dots */ /* --------------------------------------------------------------------- 7. Elevation — ledge, flash ring, toast lift. NEVER a blurred drop shadow under a lime button — the ledge is 0 Npx 0, zero blur, zero spread. Cards themselves carry no shadow at all. --------------------------------------------------------------------- */ --ledge-sm: 0 2px 0 var(--accent-ledge); /* primary buttons <=14.5px type */ --ledge-lg: 0 3px 0 var(--accent-ledge); /* primary buttons >=15px type */ --shadow-flash: 0 0 0 1px var(--accent), 0 0 0 4px var(--flash-ring); --shadow-toast: 0 16px 40px var(--toast-shadow-color); /* --------------------------------------------------------------------- 6. Motion — durations referenced by base.css keyframes and by components that animate (flash, toggle, progress, skeleton). --------------------------------------------------------------------- */ --dur-flash-in: 600ms; --dur-flash-out: 400ms; --dur-rise: 300ms; --dur-toast: 3000ms; /* within the published 2.6–3.5s window */ --dur-toggle: 220ms; --dur-progress: 500ms; --dur-skeleton-pulse: 1.5s; --ease-rise: cubic-bezier(.2, .8, .2, 1); }