/* ========================================================================== RevRadar Design Tokens — red/black (dark) · red/white (light) ========================================================================== Red is the brand and carries exactly TWO jobs: brand moments (logo, hero) and primary actions (search, apply, sign in, active filter states). It is deliberately NOT the "overpriced" badge colour any more — on the current site red means brand AND interactive AND danger AND overpriced at once, which is the main reason nothing stands out. Semantic deal-tier colours live in their own --rr-deal-* group and are temperature-shifted (rust, not pure red) so a "bad price" pill never reads as a button. Theme mechanism is the site's existing one, unchanged: bare :root = dark, body.light = light, toggled + persisted by the page's own theme script. Components consume tokens; nothing downstream hardcodes a colour. ========================================================================== */ :root { /* ---- surfaces & ink (dark: black is the ground, not a grey) ---- */ --rr-ground: #0B0B0D; --rr-surface: #131316; --rr-surface-2: #1B1B1F; --rr-line: #26262B; --rr-line-strong: #35353C; --rr-ink: #F4F4F5; --rr-ink-2: #C9C9CE; --rr-muted: #8E8E96; /* ---- brand red ---- */ --rr-accent: #FF2B2B; --rr-accent-strong: #E01212; --rr-accent-ink: #FFFFFF; --rr-accent-wash: rgba(255,43,43,0.12); --rr-radar-beam: rgba(255,43,43,0.4); /* sign-in wall radar sweep */ /* ---- semantic deal tiers (never reused for UI chrome) ---- Each tier is a TRIPLET, and the three are not interchangeable: --rr-deal-X graphic fill / border / marker — no contrast floor beyond 3:1 as a non-text boundary --rr-deal-X-wash tinted background for a pill or panel --rr-deal-X-ink TEXT sitting on that wash — the only one with a 4.5:1 obligation, so it is the only one allowed to diverge The -ink tokens exist because the base colour is NOT safe as text on its own wash: measured 2026-07-14, the light tiers ran 3.06–4.28:1 against their own wash on a white card (warn was the worst) — a real, shipped AA failure that predated the banded card and had nothing to do with it. Each -ink value is solved, not eyeballed: the first value along the tier's own hue that clears 4.7:1 on its own wash over the verdict band, so a rounding nudge can't reopen the failure. Verified live from the rendered DOM by scripts/preview-shots/band-shots.js — re-run it if you touch any of these. In dark, three of the four base colours already clear the bar, so their ink is deliberately left identical; only `negative` (4.01:1) needed lifting. */ --rr-deal-positive: #3FB37A; --rr-deal-positive-wash: rgba(63,179,122,0.15); --rr-deal-positive-ink: #3FB37A; /* 4.89:1 — passes as-is */ --rr-deal-neutral: #9AA1AD; --rr-deal-neutral-wash: rgba(154,161,173,0.14); --rr-deal-neutral-ink: #9AA1AD; /* 4.99:1 — passes as-is */ --rr-deal-warn: #E0A43B; --rr-deal-warn-wash: rgba(224,164,59,0.15); --rr-deal-warn-ink: #E0A43B; /* 5.65:1 — passes as-is */ --rr-deal-negative: #E2654A; /* rust — reads "bad", can't be confused with brand red */ --rr-deal-negative-wash: rgba(226,101,74,0.15); --rr-deal-negative-ink: #E47C62; /* base was 4.01:1 — lifted to 4.76:1 */ /* ---- skeleton / loading ---- */ --rr-skeleton: #1B1B1F; --rr-skeleton-sheen: rgba(255,255,255,0.06); /* ---- adaptive chrome surfaces (historic roles, re-based on the palette) ---- */ --rr-nav-bg: rgba(11,11,13,0.88); --rr-nav-mobile-bg: rgba(11,11,13,0.97); --rr-compact-bg: rgba(11,11,13,0.94); --rr-card-img-bg: #131316; --rr-card-source-bg: rgba(11,11,13,0.85); --rr-card-arrow-bg: rgba(11,11,13,0.8); --rr-card-arrow-border: rgba(244,244,245,0.15); --rr-dropdown-bg: #17171A; --rr-dropdown-ink: #C9C9CE; --rr-source-badge-bg: rgba(8,8,10,0.92); --rr-pwa-bg: #17171A; --rr-pwa-border: #26262B; --rr-modal-overlay: rgba(0,0,0,0.78); --rr-backdrop: rgba(0,0,0,0.62); --rr-auth-placeholder: rgba(244,244,245,0.3); --rr-auth-hint: rgba(244,244,245,0.38); --rr-auth-terms: rgba(244,244,245,0.42); --rr-auth-terms-link: rgba(244,244,245,0.6); --rr-shadow-dropdown: 0 10px 30px rgba(0,0,0,0.5); --rr-nav-shadow: none; /* ---- type ---- Bebas Neue stays: it's RevRadar's voice. Restraint is the change — display face for brand moments and prices only, DM Sans everywhere else, DM Mono strictly for data (specs, deltas, counts). */ --rr-font-display: 'Bebas Neue', 'Arial Narrow', sans-serif; --rr-font-sans: 'DM Sans', -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --rr-font-mono: 'DM Mono', ui-monospace, "SF Mono", Consolas, monospace; --rr-text-xs: 0.72rem; --rr-text-sm: 0.82rem; --rr-text-base: 0.92rem; --rr-text-md: 1rem; --rr-text-lg: 1.15rem; --rr-text-xl: 1.5rem; --rr-text-2xl: 2rem; --rr-text-display: clamp(2.2rem, 5vw, 3.6rem); --rr-leading-tight: 1.1; --rr-leading-snug: 1.35; --rr-leading-normal: 1.55; --rr-tracking-tight: -0.01em; --rr-tracking-normal: 0; --rr-tracking-wide: 0.06em; --rr-tracking-display: 0.04em; /* Bebas needs a little air */ --rr-fw-regular: 400; --rr-fw-medium: 500; --rr-fw-semibold: 600; --rr-fw-bold: 700; /* ---- spacing (4px base) ---- */ --rr-space-1: 0.25rem; --rr-space-2: 0.5rem; --rr-space-3: 0.75rem; --rr-space-4: 1rem; --rr-space-5: 1.5rem; --rr-space-6: 2rem; --rr-space-7: 3rem; --rr-space-8: 4rem; /* ---- radius (sharper than a generic SaaS: this is a tool, not a toy) ---- */ --rr-radius-sm: 4px; --rr-radius: 8px; --rr-radius-lg: 12px; --rr-radius-pill: 999px; --rr-focus-ring: var(--rr-accent); } body.light { --rr-ground: #F6F6F7; --rr-surface: #FFFFFF; --rr-surface-2: #EFEFF1; --rr-line: #E3E3E7; --rr-line-strong: #CFCFD5; --rr-ink: #131316; --rr-ink-2: #3E3E44; --rr-muted: #6E6E76; --rr-accent: #D40000; /* deeper on white for contrast; pure #FF0000 fails on white */ --rr-accent-strong: #A80000; --rr-accent-ink: #FFFFFF; --rr-accent-wash: rgba(212,0,0,0.07); --rr-radar-beam: rgba(212,0,0,0.3); /* Light is where the AA failure actually lived: every base colour below is too light to be TEXT on its own wash (3.06–4.28:1). The graphic/border role keeps the base value — it still clears the 3:1 non-text bar and it's the hue the tier is recognised by — while the -ink token carries the text. */ --rr-deal-positive: #157F4B; --rr-deal-positive-wash: rgba(21,127,75,0.08); --rr-deal-positive-ink: #127044; /* base 3.93:1 -> 4.75:1 */ --rr-deal-neutral: #6B7280; --rr-deal-neutral-wash: rgba(107,114,128,0.08); --rr-deal-neutral-ink: #5D636F; /* base 3.81:1 -> 4.71:1 */ --rr-deal-warn: #B4740E; --rr-deal-warn-wash: rgba(180,116,14,0.08); --rr-deal-warn-ink: #85580A; /* base 3.06:1 -> 4.81:1 — the worst offender */ --rr-deal-negative: #B3452C; --rr-deal-negative-wash: rgba(179,69,44,0.08); --rr-deal-negative-ink: #A64128; /* base 4.28:1 -> 4.73:1 */ --rr-skeleton: #ECECEF; --rr-skeleton-sheen: rgba(255,255,255,0.65); --rr-nav-bg: rgba(255,255,255,0.92); --rr-nav-mobile-bg: #FFFFFF; --rr-compact-bg: rgba(255,255,255,0.97); --rr-card-img-bg: #FFFFFF; --rr-card-source-bg: rgba(255,255,255,0.9); --rr-card-arrow-bg: rgba(255,255,255,0.85); --rr-card-arrow-border: #E3E3E7; --rr-dropdown-bg: #FFFFFF; --rr-dropdown-ink: #131316; --rr-source-badge-bg: #F6F6F7; --rr-pwa-bg: #FFFFFF; --rr-pwa-border: #E3E3E7; --rr-modal-overlay: rgba(19,19,22,0.55); --rr-backdrop: rgba(19,19,22,0.32); --rr-auth-placeholder: rgba(19,19,22,0.32); --rr-auth-hint: rgba(19,19,22,0.4); --rr-auth-terms: rgba(19,19,22,0.5); --rr-auth-terms-link: #D40000; --rr-shadow-dropdown: 0 10px 28px rgba(19,19,22,0.12); --rr-nav-shadow: 0 1px 0 #E3E3E7; } /* ========================================================================== LEGACY ALIASES — every var(--name) used inline across the copied pages. Keeps the un-redesigned parts of each page working while the redesign proceeds component by component. Remove once nothing references them. ========================================================================== */ :root, body.light { --black: var(--rr-ground); --surface: var(--rr-surface); --surface2: var(--rr-surface-2); --surface3: var(--rr-surface-2); --border: var(--rr-line); --white: var(--rr-ink); --grey: var(--rr-muted); --grey-light: var(--rr-ink-2); --text: var(--rr-ink); --text-secondary: var(--rr-ink-2); --text-muted: var(--rr-muted); --input-bg: var(--rr-surface); --accent: var(--rr-accent); --red: var(--rr-accent); --red-dark: var(--rr-accent-strong); --red-glow: var(--rr-accent-wash); --font-display: var(--rr-font-display); --font-body: var(--rr-font-sans); --font-mono: var(--rr-font-mono); --nav-bg: var(--rr-nav-bg); --nav-mobile-bg: var(--rr-nav-mobile-bg); --compact-bg: var(--rr-compact-bg); --card-img-bg: var(--rr-card-img-bg); --card-source-bg: var(--rr-card-source-bg); --card-arrow-bg: var(--rr-card-arrow-bg); --card-arrow-border: var(--rr-card-arrow-border); --dropdown-bg: var(--rr-dropdown-bg); --dropdown-a-color: var(--rr-dropdown-ink); --source-badge-bg: var(--rr-source-badge-bg); --pwa-bg: var(--rr-pwa-bg); --pwa-border: var(--rr-pwa-border); --modal-overlay-bg: var(--rr-modal-overlay); --backdrop-bg: var(--rr-backdrop); --auth-placeholder: var(--rr-auth-placeholder); --auth-hint-color: var(--rr-auth-hint); --auth-terms-color: var(--rr-auth-terms); --auth-terms-link-color: var(--rr-auth-terms-link); --shadow-dropdown: var(--rr-shadow-dropdown); --nav-shadow: var(--rr-nav-shadow); } /* ========================================================================== SKELETON PRIMITIVE — shared by every page's loading states. Respects prefers-reduced-motion (static block, no shimmer). ========================================================================== */ .rr-skel { position: relative; overflow: hidden; background: var(--rr-skeleton); border-radius: var(--rr-radius-sm); } .rr-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--rr-skeleton-sheen), transparent); animation: rr-shimmer 1.4s ease-in-out infinite; } @keyframes rr-shimmer { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .rr-skel::after { animation: none; } }