/* ============================================================
   Western Cape Pumps  Design Tokens
   Single source of truth. Mirrors theme.json presets and adds
   the prototype's named tokens that don't have a first-class
   WP preset slot (e.g. font-display alias, semantic roles).

   Font faces are declared in theme.json under fontFamilies.fontFace
   so WordPress emits @font-face from there. We do NOT redeclare
   @font-face here.
   ============================================================ */

:root {
  /* ---------- BRAND BLUE ---------- */
  --wcp-blue-50:        #F1F6FC;
  --wcp-blue-100:       #DEEBF7;
  --wcp-blue-300:       #7FB8E8;
  --wcp-blue:           #4F81BE;
  --wcp-blue-700:       #2F5C94;
  --wcp-blue-900:       #1F4E79;
  --wcp-cyan:           #5BB3E0;

  --wcp-gradient:       linear-gradient(180deg, #7FB8E8 0%, #4F81BE 45%, #1F4E79 100%);
  --wcp-gradient-flat:  linear-gradient(180deg, #4F81BE 0%, #2F5C94 100%);

  /* ---------- WCFP (Western Cape Fire Pumps) sub-brand ---------- */
  --wcfp-red-100:       #F8DDE0;
  --wcfp-red:           #C8242E;
  --wcfp-red-700:       #9D1B23;
  --wcfp-red-900:       #6B1116;

  /* ---------- NEUTRALS (cool industrial slate) ---------- */
  --black:              #0A0A0A;
  --ink-50:             #F6F8FC;
  --ink-100:            #EEF2F8;
  --ink-200:            #DCE3EE;
  --ink-300:            #B6C2D6;
  --ink-400:            #8294B5;
  --ink-500:            #56678A;
  --ink-700:            #2A3A52;
  --ink-900:            #0E1B2E;
  --paper:              #FFFFFF;
  --canvas:             #FAFBFD;

  /* ---------- SEMANTIC ---------- */
  --status-ok:          #2F7D4F;
  --status-warn:        #C68A1A;
  --status-danger:      #B43A2E;
  --status-info:        var(--wcp-blue);

  /* ---------- ROLES ---------- */
  --fg-1:               var(--ink-900);
  --fg-2:               var(--ink-700);
  --fg-3:               var(--ink-500);
  --fg-on-brand:        #FFFFFF;
  --bg-page:            var(--canvas);
  --bg-card:            var(--paper);
  --bg-band:            var(--wcp-blue-50);
  --bg-brand:           var(--wcp-blue-900);
  --bg-cover:           var(--black);
  --border-1:           var(--ink-200);
  --border-2:           var(--ink-300);
  --link:               var(--wcp-blue-700);
  --link-hover:         var(--wcp-blue-900);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display:       "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-body:          "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:          ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* ---------- SPACING (4px base) ---------- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
  --space-40: 10rem;

  --section-y:        var(--space-40);
  --section-y-sm:     var(--space-24);
  --container-x:      var(--space-12);

  /* ---------- RADII ---------- */
  --radius:           4px;
  --radius-0:         0;

  /* ---------- ELEVATION ---------- */
  --shadow-1: 0 1px 2px rgba(14, 27, 46, 0.06),
              0 1px 1px rgba(14, 27, 46, 0.04);
  --shadow-2: 0 2px 6px rgba(14, 27, 46, 0.08),
              0 1px 2px rgba(14, 27, 46, 0.05);
  --shadow-3: 0 8px 24px rgba(14, 27, 46, 0.10),
              0 2px 6px rgba(14, 27, 46, 0.06);
  --shadow-brand: 0 8px 28px rgba(31, 78, 121, 0.22);
  --ring-focus:   0 0 0 3px rgba(79, 129, 190, 0.35);

  /* ---------- MOTION ---------- */
  --ease:           cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast:  150ms;
  --duration-base:  200ms;
}