/* ============================================================
   tokens.css — single source of truth
   Custom properties mirror the target CMS presets
   (--wp--preset--*), with semantic role aliases layered on top.
   ============================================================ */
:root {
  /* --- Color presets (theme.json color slugs) --- */
  --wp--preset--color--signal-red:   #E01614;
  --wp--preset--color--red-deep:     #B8110F;
  --wp--preset--color--roast-emerald:#10924D;
  --wp--preset--color--emerald-deep: #0C6E3A;
  --wp--preset--color--ink:          #141414;
  --wp--preset--color--paper:        #F2F0EB;
  --wp--preset--color--surface:      #FBFAF7;
  --wp--preset--color--hairline:     #DEDBD5;
  --wp--preset--color--ink-muted:    #5C5B58;
  --wp--preset--color--caption:      #787878;
  --wp--preset--color--white:        #FFFFFF;

  /* --- Semantic role aliases --- */
  --color-bg:           var(--wp--preset--color--paper);
  --color-surface:      var(--wp--preset--color--surface);
  --color-ink:          var(--wp--preset--color--ink);
  --color-heading:      var(--wp--preset--color--ink);
  --color-text:         #2A2A28;
  --color-text-soft:    var(--wp--preset--color--ink-muted);
  --color-caption:      var(--wp--preset--color--caption);
  --color-primary:      var(--wp--preset--color--signal-red);
  --color-primary-deep: var(--wp--preset--color--red-deep);
  --color-accent:       var(--wp--preset--color--roast-emerald);
  --color-accent-deep:  var(--wp--preset--color--emerald-deep);
  --color-line:         var(--wp--preset--color--hairline);
  --color-on-dark:      #EDEBE6;
  --color-dark-surface: var(--wp--preset--color--ink);
  --color-dark-field:   #1E1E1D;
  --color-dark-line:    #35342F;
  --color-dark-muted:   #8C8B87;

  /* --- Font families --- */
  --wp--preset--font-family--display: 'Geologica', 'Arial Narrow', system-ui, sans-serif;
  --wp--preset--font-family--body:    'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-display: var(--wp--preset--font-family--display);
  --font-body:    var(--wp--preset--font-family--body);

  /* --- Fluid type scale (ratio >= 1.25) --- */
  --wp--preset--font-size--display: clamp(2.75rem, 1.1rem + 6.6vw, 7rem);
  --wp--preset--font-size--h1:      clamp(2.4rem, 1.3rem + 4.4vw, 5rem);
  --wp--preset--font-size--h2:      clamp(2rem, 1.25rem + 3vw, 3.5rem);
  --wp--preset--font-size--h3:      clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem);
  --wp--preset--font-size--stat:    clamp(2.1rem, 1.3rem + 2.4vw, 3.25rem);
  --wp--preset--font-size--lg:      1.25rem;
  --wp--preset--font-size--base:    1.0625rem;
  --wp--preset--font-size--sm:      0.9375rem;
  --wp--preset--font-size--xs:      0.8125rem;
  --wp--preset--font-size--2xs:     0.6875rem;

  /* --- Spacing: strict 8-point grid --------------------------------
     --space-N == N * 8px. Nothing off-grid is allowed in layout.
     --space-half (4px) is the single sanctioned exception and is
     reserved for optical nudges *inside* a component (icon baseline,
     caption under a label) — never for rhythm between blocks.
     ------------------------------------------------------------- */
  --wp--preset--spacing--10: 8px;
  --wp--preset--spacing--20: 16px;
  --wp--preset--spacing--30: 24px;
  --wp--preset--spacing--40: 32px;
  --wp--preset--spacing--50: 40px;
  --wp--preset--spacing--60: 48px;
  --wp--preset--spacing--70: 64px;
  --wp--preset--spacing--80: 80px;
  --wp--preset--spacing--90: 96px;
  --wp--preset--spacing--100: 120px;

  --space-half: 4px;
  --space-1:  var(--wp--preset--spacing--10);   /*   8 */
  --space-2:  var(--wp--preset--spacing--20);   /*  16 */
  --space-3:  var(--wp--preset--spacing--30);   /*  24 */
  --space-4:  var(--wp--preset--spacing--40);   /*  32 */
  --space-5:  var(--wp--preset--spacing--50);   /*  40 */
  --space-6:  var(--wp--preset--spacing--60);   /*  48 */
  --space-7:  56px;
  --space-8:  var(--wp--preset--spacing--70);   /*  64 */
  --space-9:  72px;
  --space-10: var(--wp--preset--spacing--80);   /*  80 */
  --space-11: 88px;
  --space-12: var(--wp--preset--spacing--90);   /*  96 */
  --space-14: 112px;
  --space-15: var(--wp--preset--spacing--100);  /* 120 */

  /* Semantic aliases (kept for readability; all land on the grid) */
  --space-xs:      var(--space-1);   /*  8 */
  --space-sm:      var(--space-2);   /* 16 */
  --space-md:      var(--space-3);   /* 24 */
  --space-lg:      var(--space-5);   /* 40 */
  --space-xl:      var(--space-10);  /* 80 */
  --space-section: var(--space-15);  /* 120 */

  /* --- Vertical rhythm ----------------------------------------------
     Relationship-based spacing. The gap encodes how tightly two
     elements belong together, so every section reads with the same
     cadence. Values follow the common editorial guideline of
     ~0.5x / 1x / 1.5x / 2x a 16px base, snapped to the 8pt grid.
     These are re-declared per breakpoint at the bottom of this file.
     --------------------------------------------------------------- */
  --flow-eyebrow: var(--space-2);  /* 16 — kicker  → heading  (tight pair)  */
  --flow-title:   var(--space-3);  /* 24 — heading → body text              */
  --flow-text:    var(--space-4);  /* 32 — body    → button / link row      */
  --flow-cta:     var(--space-2);  /* 16 — between adjacent buttons         */
  --flow-item:    var(--space-3);  /* 24 — between cards in a grid          */
  --flow-block:   var(--space-6);  /* 48 — between blocks inside a section  */
  --flow-head:    var(--space-8);  /* 64 — section header → section body    */
  --flow-group:   var(--space-10); /* 80 — between major sub-blocks         */
  --section-y:    var(--space-15); /* 120 — section top/bottom padding      */

  /* --- Layout (gutter min/max also sit on the grid) --- */
  --content-width: 1600px;
  --gutter: clamp(16px, 3.5vw, 56px);
  --header-h: 96px;

  /* --- Radius: ZERO by doctrine (only stamps are circular) --- */
  --radius: 0px;
  --radius-full: 9999px;

  /* --- Borders --- */
  --border-hair: 1px solid var(--color-line);
  --border-ink:  1px solid var(--color-ink);

  /* --- Motion --- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur:      280ms;
  --dur-slow: 620ms;

  /* --- Z-index scale --- */
  --z-base: 1;
  --z-header: 100;
  --z-dropdown: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;

  /* --- Elevation (flat UI; used only to reground floating cutouts) --- */
  --shadow-product: 0 40px 70px -30px rgba(20, 20, 20, 0.40);
  --shadow-product-sm: 0 24px 40px -22px rgba(20, 20, 20, 0.35);
}

/* ============================================================
   Responsive rhythm — the *only* place spacing scales down.
   Sections never hard-code a breakpoint value of their own.
   ============================================================ */
@media (max-width: 1200px) {
  :root {
    --flow-head:  var(--space-6);  /* 48 */
    --flow-group: var(--space-9);  /* 72 */
    --section-y:  var(--space-12); /* 96 */
  }
}
@media (max-width: 900px) {
  :root {
    --header-h:     72px;
    --flow-eyebrow: var(--space-1);  /*  8 */
    --flow-title:   var(--space-2);  /* 16 */
    --flow-text:    var(--space-3);  /* 24 */
    --flow-cta:     var(--space-2);  /* 16 */
    --flow-item:    var(--space-2);  /* 16 */
    --flow-block:   var(--space-5);  /* 40 */
    --flow-head:    var(--space-5);  /* 40 */
    --flow-group:   var(--space-8);  /* 64 */
    --section-y:    var(--space-8);  /* 64 */
  }
}
@media (max-width: 560px) {
  :root {
    --flow-block: var(--space-4);  /* 32 */
    --flow-head:  var(--space-4);  /* 32 */
    --flow-group: var(--space-6);  /* 48 */
    --section-y:  var(--space-7);  /* 56 */
  }
}