/* ============================================================
   Step4 Design System - TOKENS
   Single source of truth for the header AND for the upcoming
   home / archive / single-product rebuilds. Values sampled
   from the 2025 Brand Guidelines (pp. 8-9, 11, 13).

   Nothing in this file paints anything. It only declares
   custom properties, so it is safe to load site-wide next to
   the legacy UIkit/Bootstrap CSS.
   ============================================================ */

:root,
.s4h {
  /* ---- PRIMARY ---- */
  --s4-sage: #99B793;
  --s4-blue: #86B3D0;

  /* Sage tints - colour blocking only, never text or logo */
  --s4-sage-75: #A9C3A4;
  --s4-sage-50: #CCDBC9;
  --s4-sage-25: #E6EEE4;

  /* ---- SECONDARY ---- */
  --s4-charcoal: #444444;
  --s4-slate: #4E6372;
  --s4-green-deep: #6D8A74;
  --s4-terracotta: #CC976F;
  --s4-sand: #E4D5C3;

  /* ---- EXTENDED SURFACES ---- */
  --s4-cream: #F6F0E6;
  --s4-cream-deep: #EFE7D8;
  --s4-white: #FFFFFF;
  --s4-ink: #444444;
  --s4-ink-soft: #6B6B6B;

  /* ---- EXTENDED ACCENTS ---- */
  --s4-terracotta-deep: #A9663D;
  --s4-coral: #E0895E;
  --s4-sage-soft: #BCD2B4;
  --s4-tan: #CDA98B;
  --s4-clay-cta: #BE6E3C;
  --s4-brick: #B05442;
  --s4-brick-soft: #C96F5E;
  --s4-brick-wash: #F6E3DE;

  --s4-accent-gradient: linear-gradient(100deg,
    var(--s4-blue) 0%, var(--s4-sage) 38%, var(--s4-tan) 68%, var(--s4-terracotta) 100%);

  /* ---- SEMANTIC ALIASES ---- */
  --s4-text: var(--s4-ink);
  --s4-text-muted: var(--s4-ink-soft);
  --s4-text-on-dark: #FFFFFF;
  --s4-surface: var(--s4-cream);
  --s4-surface-alt: var(--s4-cream-deep);
  --s4-surface-card: var(--s4-white);
  --s4-cta: var(--s4-terracotta);
  --s4-cta-hover: var(--s4-terracotta-deep);
  --s4-focus: var(--s4-terracotta);
  --s4-hairline: rgba(60, 57, 48, .14);

  /* ---- TYPE ---- */
  --s4-font-head: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --s4-font-body: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --s4-w-regular: 400;
  --s4-w-medium: 500;
  --s4-w-semibold: 600;
  --s4-w-bold: 700;
  --s4-w-heavy: 800;

  --s4-fs-display: clamp(2.7rem, 8vw, 5.2rem);
  --s4-fs-h1: clamp(2.5rem, 7vw, 4.4rem);
  --s4-fs-h2: clamp(1.9rem, 4.4vw, 3rem);
  --s4-fs-h3: 1.3rem;
  --s4-fs-lede: clamp(1.05rem, 2.4vw, 1.28rem);
  --s4-fs-body: 17px;

  --s4-lh-tight: 1.08;
  --s4-lh-body: 1.65;
  --s4-ls-eyebrow: .14em;

  /* ---- SPACE, RADII, SHADOW, LAYOUT ---- */
  --s4-r-sm: 14px;
  --s4-r-md: 22px;
  --s4-r-lg: 28px;
  --s4-r-pill: 999px;

  --s4-shadow-sm: 0 2px 10px rgba(60, 57, 48, .06);
  --s4-shadow-md: 0 18px 44px rgba(60, 57, 48, .13);
  --s4-shadow-lg: 0 36px 80px rgba(60, 57, 48, .20);

  --s4-wrap: 1240px;
  --s4-gutter: clamp(20px, 5vw, 56px);
  --s4-header-h: 70px;

  --s4-ease: cubic-bezier(.22, .61, .36, 1);
  --s4-dur-fast: .18s;
  --s4-dur: .25s;
}