/* ==========================================================================
   SNAP MOTORSPORTS — COLOR TOKENS
   Brand source: Style Guide.docx — RGB 0,107,166 / HEX #006BA6 / Pantone 307 U/C
   Everything else (neutrals, semantic colors) is derived in OKLCH from that
   single brand blue to stay harmonious — the guide did not specify them.
   ========================================================================== */

:root {
  /* ---- Brand blue (from Style Guide) ---------------------------------- */
  --snap-blue-700: #004b73;   /* pressed / shadow-side */
  --snap-blue-600: #005c8f;
  --snap-blue-500: #006ba6;   /* brand primary — exact spec value */
  --snap-blue-400: oklch(52% 0.11 231);
  --snap-blue-300: oklch(65% 0.10 231);
  --snap-blue-200: oklch(82% 0.06 231);
  --snap-blue-100: oklch(93% 0.03 231);
  --snap-blue-50:  oklch(97% 0.012 231);

  /* ---- Neutrals — cool steel grays sharing the blue's hue -------------- */
  --snap-ink-950: oklch(16% 0.006 231);   /* near-black, page bg (dark mode / hero) */
  --snap-ink-900: oklch(20% 0.008 231);
  --snap-ink-800: oklch(27% 0.009 231);
  --snap-ink-700: oklch(36% 0.010 231);
  --snap-ink-600: oklch(46% 0.010 231);
  --snap-ink-500: oklch(56% 0.010 231);
  --snap-ink-400: oklch(68% 0.008 231);
  --snap-ink-300: oklch(79% 0.007 231);
  --snap-ink-200: oklch(88% 0.005 231);
  --snap-ink-100: oklch(94% 0.003 231);
  --snap-ink-50:  oklch(97.5% 0.002 231);
  --snap-white:   #ffffff;

  /* ---- Semantic accents — desaturated to match the brand's industrial,
     non-candy mood; same lightness/chroma family as the blue scale -------- */
  --snap-green-500:  oklch(52% 0.13 148);   /* success / in stock */
  --snap-green-100:  oklch(93% 0.045 148);
  --snap-amber-500:  oklch(66% 0.15 75);    /* warning / track-day caution */
  --snap-amber-100:  oklch(93% 0.06 75);
  --snap-red-500:    oklch(50% 0.17 25);    /* danger / out of stock */
  --snap-red-100:    oklch(93% 0.05 25);

  /* ---- Semantic aliases ------------------------------------------------- */
  --color-brand:            var(--snap-blue-500);
  --color-brand-hover:      var(--snap-blue-600);
  --color-brand-active:     var(--snap-blue-700);
  --color-brand-tint:       var(--snap-blue-50);

  --surface-page:           var(--snap-white);
  --surface-page-dark:      var(--snap-ink-950);
  --surface-card:           var(--snap-white);
  --surface-sunken:         var(--snap-ink-50);
  --surface-overlay:        var(--snap-ink-900);
  --surface-brand:          var(--snap-blue-500);

  --border-subtle:          var(--snap-ink-200);
  --border-default:         var(--snap-ink-300);
  --border-strong:          var(--snap-ink-700);
  --border-brand:           var(--snap-blue-500);

  --text-primary:           var(--snap-ink-950);
  --text-secondary:         var(--snap-ink-600);
  --text-tertiary:          var(--snap-ink-400);
  --text-on-brand:          var(--snap-white);
  --text-on-dark:           var(--snap-white);
  --text-on-dark-secondary: var(--snap-ink-300);
  --text-link:              var(--snap-blue-500);
  --text-link-hover:        var(--snap-blue-700);

  --status-success:         var(--snap-green-500);
  --status-success-bg:      var(--snap-green-100);
  --status-warning:         var(--snap-amber-500);
  --status-warning-bg:      var(--snap-amber-100);
  --status-danger:          var(--snap-red-500);
  --status-danger-bg:       var(--snap-red-100);
  --status-info:            var(--snap-blue-500);
  --status-info-bg:         var(--snap-blue-100);

  --focus-ring:             var(--snap-blue-400);
}