/*
 * Blue Motors Southampton — Design Tokens (1.8.0)
 *
 * Single source of truth for colour, typography, spacing, radii, motion.
 * Imported first by every plugin stylesheet so all subsequent rules can use
 * the variables. No selectors / rules in this file — variables only, plus
 * one prefers-color-scheme override block.
 *
 * Card palette is keyed by service slug so any service-card style sheet can
 * pick the right colour with [data-service="<slug>"].
 */

:root {
  /* Brand --------------------------------------------------------------- */
  --bms-brand-navy:        #1e3a5f;   /* Header, footer, primary chrome    */
  --bms-brand-navy-hover:  #16294a;
  --bms-brand-red:         #dc2626;   /* "BOOK NOW" / primary CTA          */
  --bms-brand-red-hover:   #b91c1c;

  /* Surface & neutrals -------------------------------------------------- */
  --bms-bg:                #f5f6f8;
  --bms-surface:           #ffffff;
  --bms-surface-muted:     #f9fafb;
  --bms-border:            #e5e7eb;
  --bms-border-strong:     #d1d5db;
  --bms-text:              #111827;
  --bms-text-muted:        #6b7280;
  --bms-text-inverse:      #ffffff;

  /* Status -------------------------------------------------------------- */
  --bms-success:           #15803d;
  --bms-warning:           #b45309;
  --bms-error:             #b91c1c;
  --bms-info:              #0891b2;

  --bms-focus-ring:        0 0 0 3px rgba(30, 58, 95, 0.30);

  /* Typography ---------------------------------------------------------- */
  --bms-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  --bms-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --bms-fs-xs:    12px;
  --bms-fs-sm:    14px;
  --bms-fs-base:  16px;
  --bms-fs-lg:    20px;
  --bms-fs-xl:    28px;
  --bms-fs-2xl:   36px;

  --bms-lh-tight: 1.25;
  --bms-lh-base:  1.5;
  --bms-lh-loose: 1.7;

  --bms-fw-reg:   400;
  --bms-fw-med:   500;
  --bms-fw-semi:  600;
  --bms-fw-bold:  700;

  /* Spacing scale (8px base; -1 is the 4px half-step) ------------------- */
  --bms-s-1:  4px;
  --bms-s-2:  8px;
  --bms-s-3:  12px;
  --bms-s-4:  16px;
  --bms-s-5:  20px;
  --bms-s-6:  24px;
  --bms-s-8:  32px;
  --bms-s-10: 40px;
  --bms-s-12: 48px;
  --bms-s-16: 64px;

  /* Radii --------------------------------------------------------------- */
  --bms-r-sm:   4px;
  --bms-r-base: 8px;
  --bms-r-lg:   12px;
  --bms-r-xl:   16px;
  --bms-r-pill: 9999px;

  /* Motion -------------------------------------------------------------- */
  --bms-t-fast:  150ms ease-out;
  --bms-t-base:  200ms ease-out;
  --bms-t-slow:  300ms ease-in-out;

  /* Elevations (used sparingly — modals + sticky bar only) -------------- */
  --bms-elev-card-hover: 0 8px 20px rgba(17, 24, 39, 0.10);
  --bms-elev-modal:      0 8px 24px rgba(17, 24, 39, 0.18);
  --bms-elev-sticky:     0 -4px 12px rgba(17, 24, 39, 0.06);

  /* Layout -------------------------------------------------------------- */
  --bms-touch-min: 44px;
  --bms-bp-mobile: 767px;
  --bms-content-max: 1100px;

  /* Service-card palette (keyed by service slug) ----------------------- *
   * Each colour was sampled from the existing booking page so the look   *
   * remains familiar; we only standardise the structural CSS around them.*
   * To re-skin a card, change ONE value here.                            */
  --bms-card-mot_test:             #0d9488;  /* teal                      */
  --bms-card-interim_service:      #dc2626;  /* warm red                  */
  --bms-card-full_service:         #1e40af;  /* royal blue                */
  --bms-card-air_con_regas:        #22c55e;  /* bright green              */
  --bms-card-air_con_service:      #f59e0b;  /* amber                     */
  --bms-card-brake_check:          #b45309;  /* tan / warm brown          */
  --bms-card-brake_service:        #78350f;  /* deep brown                */
  --bms-card-suspension_check:     #f97316;  /* bright orange             */
  --bms-card-battery_test:         #0891b2;  /* cyan                      */
  --bms-card-battery_replacement:  #1e3a5f;  /* brand navy                */
  --bms-card-exhaust_check:        #475569;  /* slate                     */
  --bms-card-exhaust_repair:       #64748b;  /* lighter slate             */
  --bms-card-clutch_check:         #a855f7;  /* purple                    */
  --bms-card-diagnostic_check:     #6366f1;  /* indigo                    */
  --bms-card-default:              #1e3a5f;  /* fallback for new services */
}

/* Reduced motion: collapse all timed transitions ------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bms-t-fast: 0ms;
    --bms-t-base: 0ms;
    --bms-t-slow: 0ms;
  }
}

/* Dark mode hook ------------------------------------------------------- *
 * Applies when the system requests dark mode AND the page isn't forced  *
 * into light by the existing .bms-theme-light wrapper from 1.6.0.        */
@media (prefers-color-scheme: dark) {
  :root:not(.bms-theme-light) {
    --bms-bg:            #0f1115;
    --bms-surface:       #161a20;
    --bms-surface-muted: #1d222a;
    --bms-border:        #2a2f37;
    --bms-border-strong: #3a4049;
    --bms-text:          #e5e7eb;
    --bms-text-muted:    #9ca3af;
  }
}