/* ============================================================
   Car Help Canada — Design tokens
   Ported verbatim from the 2026 redesign design system
   (_ds/.../tokens/{colors,typography,spacing,effects}.css).
   CSS custom properties only — these carry the entire brand look.
   Open Sans is enqueued separately (see inc/enqueue.php).
   ============================================================ */

:root {
  /* ---- Brand red (primary) ---- */
  --red-50:  #FDECEC;
  --red-100: #FAD2D3;
  --red-200: #F5A6A9;
  --red-400: #F2474D;
  --red-500: #ED1C24; /* core brand red — logo, buttons, prices, links */
  --red-600: #D11017; /* hover */
  --red-700: #B00D13; /* active / press */
  --red-800: #8A0A0F;

  /* ---- Coral / salmon (illustration accent) ---- */
  --coral-300: #F9A98F;
  --coral-400: #FC8E72;
  --coral-500: #FC7E65;

  /* ---- Pink tints (soft section + illustration backgrounds) ---- */
  --pink-50:  #FBF5F5;
  --pink-100: #FCEDEC;
  --pink-200: #F9D9D6;
  --pink-300: #F2B8B2;

  /* ---- Neutrals ---- */
  --white:     #FFFFFF;
  --gray-50:   #F7F8FC; /* light blue-grey page tint (hero sections) */
  --gray-100:  #F1F3F7;
  --gray-200:  #E8EAEF;
  --gray-300:  #D9DCE1; /* default borders */
  --gray-400:  #9CA3AF;
  --gray-500:  #767676; /* muted text */
  --gray-600:  #555555; /* body text */
  --gray-700:  #3A3A3A;
  --charcoal:  #222222; /* footer / dark surface */
  --black:     #161616; /* headings / ink */

  /* ---- Semantic status ---- */
  --green-500: #2E9E4F; /* success / verified checkmarks */
  --green-50:  #E9F6EE;
  --amber-500: #E0991A;
  --amber-50:  #FBF1DC;

  /* ---- Semantic colour aliases (prefer these) ---- */
  --color-primary:        var(--red-500);
  --color-primary-hover:  var(--red-600);
  --color-primary-active: var(--red-700);
  --color-primary-soft:   var(--red-50);
  --color-accent:         var(--coral-500);

  --text-heading: var(--black);
  --text-body:    var(--gray-600);
  --text-muted:   var(--gray-500);
  --text-inverse: var(--white);
  --text-link:    var(--red-500);
  --text-on-primary: var(--white);

  --surface-page:    var(--white);
  --surface-subtle:  var(--gray-50);
  --surface-pink:    var(--pink-50);
  --surface-card:    var(--white);
  --surface-footer:  var(--charcoal);
  --surface-inverse: var(--charcoal);

  --border-default: var(--gray-300);
  --border-subtle:  var(--gray-200);
  --border-strong:  var(--gray-400);

  --focus-ring: var(--red-400);

  --success: var(--green-500);
  --warning: var(--amber-500);
  --danger:  var(--red-600);

  /* ---- Typography ---- */
  --font-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: var(--font-sans);
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --fw-light:    300; /* large display headings */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600; /* sub-heads, buttons, labels */
  --fw-bold:     700;
  --fw-extra:    800;

  --fs-display: 52px;
  --fs-h1:      40px;
  --fs-h2:      32px;
  --fs-h3:      24px;
  --fs-h4:      20px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;

  --lh-tight:   1.15;
  --lh-heading: 1.25;
  --lh-snug:    1.45;
  --lh-body:    1.7; /* signature roomy body leading */

  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-eyebrow: 0.14em; /* uppercase eyebrows / button labels */

  /* ---- Spacing (8px rhythm) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --gap-inline:   var(--space-3);
  --gap-stack:    var(--space-5);
  --pad-card:     var(--space-6);
  --pad-button-y: 14px;
  --pad-button-x: var(--space-6);
  --section-y:    var(--space-9);

  --container-max:    1180px;
  --container-narrow: 860px;
  --container-pad:    var(--space-6);

  /* ---- Effects: radius ---- */
  --radius-none: 0;    /* buttons & pricing panels are square */
  --radius-sm:   4px;
  --radius-md:   8px;  /* cards */
  --radius-lg:   12px; /* feature / illustration cards */
  --radius-xl:   20px;
  --radius-pill: 999px;

  --border-width: 1px;
  --border-hairline: 1px solid var(--border-subtle);
  --border-card: 1px solid var(--border-default);

  /* ---- Shadows (soft, low-chroma, diffuse) ---- */
  --shadow-xs: 0 1px 2px rgba(22, 22, 22, 0.06);
  --shadow-sm: 0 1px 3px rgba(22, 22, 22, 0.08), 0 1px 2px rgba(22, 22, 22, 0.05);
  --shadow-md: 0 8px 24px rgba(22, 22, 22, 0.08);
  --shadow-lg: 0 16px 40px rgba(22, 22, 22, 0.10);
  --shadow-focus: 0 0 0 3px var(--red-100);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --transition-base: all var(--dur-base) var(--ease-standard);
}