/* ============================================================
   DeetosSnel-QLS — DESIGN TOKENS
   The single source of truth for the whole design system.
   Everything else (components, pages) reads from these.

   → WordPress: these map 1:1 onto theme.json "settings"
     (color.palette, typography.fontFamilies, spacing.spacingScale).
     Change a value here → change it once in theme.json later.
   ============================================================ */

:root {
  /* ---- BRAND COLOR ---------------------------------------- */
  --c-red:        #C4262E;   /* primary accent — logo, eyebrows, CTAs */
  --c-red-dark:   #9E1E25;   /* hover / pressed state for red         */

  /* ---- INK & SURFACE -------------------------------------- */
  --c-black:      #1E1E1E;   /* headings on light, darkest surface    */
  --c-dark:       #181818;   /* section backgrounds (stats strip)     */
  --c-panel:      #1F1F1F;   /* raised dark panels                    */
  --c-header:     #0D0D0D;   /* fixed header background (near-black)   */
  --c-bg:         #F5F4F0;   /* page background (off-white)           */
  --c-white:      #FFFFFF;

  /* ---- TEXT ----------------------------------------------- */
  --c-gray:       #888888;   /* muted labels on light                 */
  --c-muted:      #B0B0B0;   /* muted text                            */
  --c-body:       #555555;   /* body copy on light                    */

  /* ---- LINES ---------------------------------------------- */
  --c-border:     #2A2A2A;   /* dividers on dark                      */
  --c-border-l:   #E8E8E8;   /* dividers on light                     */

  /* ---- TEXT-ON-DARK (alpha whites — reused everywhere) ---- */
  --c-on-dark-1:  rgba(255,255,255,0.90);
  --c-on-dark-2:  rgba(255,255,255,0.55);
  --c-on-dark-3:  rgba(255,255,255,0.30);
  --c-hairline:   rgba(255,255,255,0.08);
  --c-glass:      rgba(255,255,255,0.04);

  /* ---- TYPE FAMILIES -------------------------------------- */
  /* DESIGN DECISION (confirm): the brandbook comment in the
     source says "Helvetica for digital", but the built pages
     lean on Bebas Neue + Barlow. Defaults below use Bebas for
     editorial display and Helvetica-safe Barlow for body.
     Swap here to change the whole system.                     */
  --font-display: 'Bebas Neue', 'Barlow Condensed', 'Helvetica Neue', sans-serif; /* huge uppercase heroes */
  --font-heading: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;        /* subheads, labels, data */
  --font-body:    'Barlow', 'Helvetica Neue', Arial, sans-serif;                  /* paragraphs, UI          */

  /* ---- TYPE SCALE (fluid) --------------------------------- */
  --step-eyebrow: 0.72rem;                     /* 11–12px labels     */
  --step-body:    1rem;                        /* 16px               */
  --step-lead:    1.15rem;                     /* intro paragraphs   */
  --step-h3:      clamp(1.25rem, 2vw, 1.6rem);
  --step-h2:      clamp(2rem, 3.5vw, 2.8rem);
  --step-display: clamp(3rem, 6vw, 6rem);      /* hero headline      */

  --lh-tight:  0.92;   /* display */
  --lh-snug:   1.15;   /* headings */
  --lh-body:   1.65;   /* copy */
  --track-cap: 0.15em; /* letter-spacing for uppercase labels */

  /* ---- SPACING SCALE (8pt-ish) ---------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;   /* vertical rhythm between big sections */

  /* ---- LAYOUT --------------------------------------------- */
  --container:      1200px;
  --container-wide: 1440px;
  --gutter:         32px;
  --header-h:       68px;

  /* ---- SHAPE & MOTION ------------------------------------- */
  --radius: 0;   /* the identity is sharp-cornered — keep 0 */
  --ease:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur:    0.2s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.001s; }
}