/* ================================================================
   RevPIQ - design tokens (v4): white + dark
   Colour rules from the business:
     • GOLD   (#ffb300) is used on WHITE backgrounds.
     • YELLOW (#ffc905) is used on the DARK backgrounds (the app's
       near-black navy, and the brand indigo of the crest band).
     • No pale blue-grey page backgrounds (gold is illegible on them).
   The accent is therefore decided by the SURFACE, not just the theme:
     • white page (light theme)              → gold
     • dark page (dark theme) and any        → yellow
       .ui-dark panel (product screens, crest band)
   lib/theme.js sets <html data-theme>. White is the default.
   ================================================================ */

/* ---------------- Shared + the white theme (default) ---------------- */
:root {
  color-scheme: light;

  /* Type */
  --font-logo: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;   /* wordmark only */
  --font-display: 'Archivo', 'Hanken Grotesk', system-ui, sans-serif;       /* headlines */
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-data: 'Spline Sans Mono', ui-monospace, Menlo, monospace;

  /* Type scale: v4 is "zoomed out" ~10% from v3 */
  --fs-small: 0.8125rem;
  --fs-body: 1rem;
  --fs-lead: 1.125rem;
  --fs-h4: 1.125rem;
  --fs-h3: 1.4rem;
  --fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.6rem);
  --fs-h1: clamp(2.3rem, 1.4rem + 3.8vw, 4.25rem);

  /* Space (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;
  --s-32: 128px;
  --section-pad: clamp(52px, 7vw, 104px);

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 9999px;

  /* Motion (no bounce, ever) */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 150ms;
  --t-normal: 250ms;
  --t-slow: 400ms;

  /* Layout: a little wider so the page sits further back */
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);

  /* Brand indigo (crest field, crest band) */
  --indigo: #120349;
  --bg-crest: #120349;

  /* Accent on WHITE: gold */
  --accent: #ffb300;
  --accent-hover: #ffc233;
  --accent-deep: #e09d00;
  --accent-12: rgba(255, 179, 0, 0.14);
  --accent-25: rgba(255, 179, 0, 0.32);
  --accent-40: rgba(255, 179, 0, 0.5);
  --ink-on-accent: #1a1400;
  /* Gold can't be read as small text on white, so accent-coloured
     text falls back to ink on white (dark surfaces override this). */
  --accent-text: var(--ink);

  /* White surfaces: pure white page, separated by hairlines.
     --bg-2 / --bg-3 are neutral fills for controls only, never pages. */
  --bg-page: #ffffff;
  --bg-1: #ffffff;
  --bg-2: #f3f3f5;
  --bg-3: #e6e6ea;
  --bg-deep: #ffffff;

  --line-subtle: rgba(20, 18, 46, 0.08);
  --line: rgba(20, 18, 46, 0.13);
  --line-strong: rgba(20, 18, 46, 0.22);

  --ink: #14122e;
  --ink-2: #46465f;
  --ink-3: #5f5d78;

  --blue: #2563eb;
  --blue-12: rgba(37, 99, 235, 0.1);
  --blue-ink: #1d4ed8;
  --green: #047857;
  --green-12: rgba(4, 120, 87, 0.1);
  --orange: #c2410c;
  --orange-12: rgba(194, 65, 12, 0.1);
  --red: #dc2626;

  /* Score bands (0-100), deepened for white */
  --band-1: #dc2626;
  --band-2: #ea580c;
  --band-3: #a87f00;
  --band-4: #16a34a;
  --band-5: #15803d;
  --band-6: #0891b2;

  --header-bg: rgba(255, 255, 255, 0.92);
  --hover: rgba(20, 18, 46, 0.05);
  --link-hover: #1d4ed8;
  --shadow-panel: 0 20px 50px rgba(20, 18, 46, 0.14);
  --crest-shadow: drop-shadow(0 10px 22px rgba(18, 3, 73, 0.18));
  --hero-glow: transparent;

  /* Older names still used in the stylesheets */
  --gold: var(--accent);
  --gold-hover: var(--accent-hover);
  --gold-deep: var(--accent-deep);
  --gold-crest: var(--accent);
  --gold-12: var(--accent-12);
  --gold-25: var(--accent-25);
  --gold-40: var(--accent-40);
  --gold-ink: var(--accent-text);
  --gold-logo: var(--accent);
  --ink-on-gold: var(--ink-on-accent);
}

/* ---------------- Dark: the whole page, or a .ui-dark panel ----------------
   The app's original near-black navy, with the yellow accent. */
[data-theme='dark'],
.ui-dark {
  color-scheme: dark;

  --accent: #ffc905;
  --accent-hover: #ffd84a;
  --accent-deep: #e6b200;
  --accent-12: rgba(255, 201, 5, 0.12);
  --accent-25: rgba(255, 201, 5, 0.28);
  --accent-40: rgba(255, 201, 5, 0.45);
  --accent-text: var(--accent);

  --bg-page: #13151f;
  --bg-1: #1a1d2b;
  --bg-2: #21243a;
  --bg-3: #282b40;
  --bg-deep: #10121b;   /* call screen, deepest panels */

  --line-subtle: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.16);

  --ink: #f0f0f3;
  --ink-2: #b4b7c4;
  --ink-3: #9296a6;

  --blue: #4f8ff7;
  --blue-12: rgba(79, 143, 247, 0.12);
  --blue-ink: #8db6ff;
  --green: #34d399;
  --green-12: rgba(52, 211, 153, 0.12);
  --orange: #f97316;
  --orange-12: rgba(249, 115, 22, 0.12);
  --red: #f87171;

  --band-1: #ef4444;
  --band-2: #f97316;
  --band-3: #fbbf24;
  --band-4: #4ade80;
  --band-5: #22c55e;
  --band-6: #22d3ee;

  --header-bg: rgba(19, 21, 31, 0.86);
  --hover: rgba(255, 255, 255, 0.05);
  --link-hover: #7fb0ff;
  --shadow-panel: 0 30px 80px rgba(0, 0, 0, 0.42);
  --crest-shadow: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.5));
  --hero-glow: rgba(79, 143, 247, 0.07);

  /* Re-point the older names so they resolve to yellow here */
  --gold: var(--accent);
  --gold-hover: var(--accent-hover);
  --gold-deep: var(--accent-deep);
  --gold-crest: var(--accent);
  --gold-12: var(--accent-12);
  --gold-25: var(--accent-25);
  --gold-40: var(--accent-40);
  --gold-ink: var(--accent);
  --gold-logo: var(--accent);
}

/* A dark panel on the white page re-sets its own text colour. */
.ui-dark { color: var(--ink); }