/**
 * Autotire design tokens — CSS custom properties.
 *
 * These map the UI-DESIGN-SPEC.md token names to the actual values.
 * WP/WooCommerce components use the wp--preset-- namespace (set in theme.json);
 * non-WP components (e.g. tire-finder, branch cards) should use the --at-*
 * aliases defined here so they remain in sync if the palette changes.
 *
 * Source of truth for colors: theme.json → settings.color.palette
 * Extracted from the Lovable prototype (wheelhouse-style-refresh.lovable.app)
 * and refined via browser DevTools.
 */

:root {
  /* ── Typography ────────────────────────────────────────── */
  --at-font: 'Heebo', 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Primary palette (Autotire cyan / navy) ─────────────── */
  --at-primary:       #1EBDE3;   /* CTA background, active tab underline */
  --at-primary-dark:  #00A0D7;   /* hover, links */
  --at-primary-light: #36CAF1;   /* hero stats, announcement chip */

  /* ── Navy ────────────────────────────────────────────────── */
  --at-navy:          #193348;   /* headings, card titles, nav links */
  --at-navy-dark:     #091C2C;   /* hero gradient start, footer bg */

  /* ── Accents ─────────────────────────────────────────────── */
  --at-accent:        #E62C2C;   /* מבצע badge, sale flash */
  --at-yellow:        #FFC93C;   /* star, step numbers, CTA strip */

  /* ── Surface / background ───────────────────────────────── */
  --at-surface:         #FFFFFF;  /* page background, card bg */
  --at-surface-elevated:#FFFFFF;  /* cards (same for now) */
  --at-muted:           #EFF2F5;  /* section backgrounds, input bg */

  /* ── Text ────────────────────────────────────────────────── */
  --at-text:          #0A131A;   /* body */
  --at-text-muted:    #5A656E;   /* secondary labels, breadcrumbs */

  /* ── Borders / inputs ───────────────────────────────────── */
  --at-border:        #DFE6EB;
  --at-input:         #E7ECF0;

  /* ── Radius & shadow (component defaults) ───────────────── */
  --at-radius:        12px;
  --at-shadow:        0 4px 24px rgba(0,0,0,.08);
  --at-shadow-card:   0 1px 0 #0f1e3c0a, 0 12px 32px -16px #0f1e3c2e;
  --at-shadow-soft:   0 1px 2px #0f1e3c0f, 0 8px 24px -12px #0f1e3c1f;

  /* ── Spacing scale (used in components.css logical properties) ── */
  --at-space-xs:   0.25rem;
  --at-space-sm:   0.5rem;
  --at-space-md:   1rem;
  --at-space-lg:   1.5rem;
  --at-space-xl:   2.5rem;
  --at-space-2xl:  4rem;

  /* ── Container ───────────────────────────────────────────── */
  --at-max-width:  1400px;
}