/**
 * Maxt Offroad Theme — Design Tokens
 * Source: C:\dev\wordpress\razorback\themes\rbo\app\globals.css (V0 reference)
 * OKLCH values are canonical. Hex fallbacks for Elementor / legacy browsers.
 * Last updated: 2026-03-13
 */

:root {
  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Oswald', Impact, 'Arial Narrow', sans-serif;

  /* ── Brand Colors ───────────────────────────────────────────────────────── */

  /* Page backgrounds */
  --background: #f8f8f8;
  --background: oklch(0.98 0 0);      /* near-white */
  --foreground: #0b0b0b;
  --foreground: oklch(0.15 0 0);      /* near-black */

  /* Primary — Offroad Orange (interactive).
     Darkened 2026-07-07 from the display orange (#f0532b, 3.51:1 vs white)
     for WCAG AA: #d23a15 is 4.82:1 under white button text and 4.54:1 as
     link/price text on the #f8f8f8 background. Hex is canonical for this
     token — the AA ratios were verified against the hex value, so no OKLCH
     override. Large display headings keep the brighter orange via
     --brand-orange below. */
  --primary: #d23a15;
  --primary-foreground: #ffffff;
  --primary-foreground: oklch(1 0 0);

  /* Brand Orange — display-only. For large display headings (≥24px bold,
     where WCAG needs only 3:1: #f0532b vs white = 3.51:1) and for orange
     text on dark backgrounds. Never place white text on this. */
  --brand-orange: #f0532b;
  --brand-orange: oklch(0.65 0.2 35);

  /* Primary on tint — orange text sitting on the 10% --brand-orange tint
     (which blends to ~#f7e7e3 over --card). That tint lightens the
     background just enough that --primary drops to 4.04:1 and fails AA at
     small sizes; #b83112 restores 5.05:1. Use for any small text on the
     orange tint. Hex canonical — ratio verified against the hex.

     Also the correct token on --muted (#eeeeee), where --primary is 4.15:1
     and fails; this is 5.19:1 there. */
  --primary-on-tint: #b83112;

  /* Which orange goes on which background (AA, small text — verified ratios):
       --background / --card  #f8f8f8 → --primary          4.54:1
       --muted                #eeeeee → --primary-on-tint   5.19:1
       --brand-orange tint    ~#f7e7e3 → --primary-on-tint  5.05:1
       --secondary (dark)     #222222 → --brand-orange      4.53:1
     Orange SVG icons are non-text (3:1), so --primary is fine on any of these.
     Picking the wrong rung is the recurring bug — it looks correct and only
     fails the ratio. */

  /* Secondary — Charcoal */
  --secondary: #222222;
  --secondary: oklch(0.25 0 0);
  --secondary-foreground: #f8f8f8;
  --secondary-foreground: oklch(0.98 0 0);

  /* Muted */
  --muted: #eeeeee;
  --muted: oklch(0.95 0 0);
  --muted-foreground: #555555;
  --muted-foreground: oklch(0.45 0 0);

  /* Cards */
  --card: #f8f8f8;
  --card: oklch(0.98 0 0);
  --card-foreground: #0b0b0b;
  --card-foreground: oklch(0.15 0 0);

  /* Accent — hover state for the interactive orange.
     Darker on hover (was lighter #f96c4a, 2.89:1 vs white — AA fail):
     #c23514 vs #fff = 5.51:1. Hex canonical, same reasoning as --primary. */
  --accent: #c23514;
  --accent-foreground: #ffffff;
  --accent-foreground: oklch(1 0 0);

  /* Borders & inputs */
  --border: #d7d7d7;
  --border: oklch(0.88 0 0);
  --input: #e4e4e4;
  --input: oklch(0.92 0 0);
  --ring: #f0532b;
  --ring: oklch(0.65 0.2 35);         /* focus ring = primary */

  /* Destructive */
  --destructive: #d40924;
  --destructive: oklch(0.55 0.22 25);
  --destructive-foreground: #ffffff;
  --destructive-foreground: oklch(1 0 0);

  /* ── Spacing & Shape ────────────────────────────────────────────────────── */
  --radius: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;  /* 8px */
  --radius-lg: 0.75rem; /* 12px */

  /* ── Shadows ────────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow:    0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* ── Z-index scale ──────────────────────────────────────────────────────── */
  --z-header:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
}

/* Dark mode block removed pre-launch: it was vestigial V0 carryover, no
   surface is designed for it, and it silently degraded the AA-fixed orange
   tokens on dark backgrounds. Reintroduce deliberately if dark mode ever
   becomes a real design target. */

/* ── Base resets ─────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4,
.brand-text,
.cta-text,
.nav-link {
  font-family: var(--font-display);
}