/* ============================================================
   Cluster Equipment NZ — design tokens
   Derived from clusterfitness.com's live brand values (Rubik display
   type, Karla body type, coral-red accent, near-black sections) and
   NZ-market adapted. Placeholder tokens only — swap for final brand
   guidelines once Cluster's global team confirms asset usage.
   ============================================================ */

:root{
  /* --- neutrals (light sections) --- */
  --paper:        #F7F3F5;
  --paper-raised: #EFE9EA;
  --paper-sunken: #E7DEE0;
  --ink:          #1A1414;
  --ink-soft:     #453E3E;
  --ink-faint:    #808285;
  --line:         #DDD3D5;

  /* --- dark sections (header, hero, footer) --- */
  --charcoal:       #050505;
  --charcoal-raised:#161010;
  --charcoal-soft:  #2B161B;
  --on-charcoal:    #FFFFFF;
  --on-charcoal-soft: rgba(255,255,255,0.68);
  --line-on-charcoal: rgba(255,255,255,0.16);

  /* --- accent (CTAs, price, sale) --- */
  --accent:       #EF4D48;
  --accent-hover: #C9292B;
  --accent-tint:  #FBE3E1;
  --on-accent:    #FFFFFF;

  /* --- semantic --- */
  --stock-ok-bg:   #DFEEE1;
  --stock-ok-fg:   #256A34;
  --stock-low-bg:  #F6E7C9;
  --stock-low-fg:  #8A5A17;
  --stock-out-bg:  #EFE1E2;
  --stock-out-fg:  #8A2E2E;
  --sale-bg:       #FBE3E1;
  --sale-fg:       #A22823;
  --trade-bg:      #1A1414;
  --trade-fg:      #FFFFFF;

  /* --- type --- */
  --font-display: 'Rubik', system-ui, sans-serif;
  --font-body:    'Karla', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --fs-h1:   clamp(2.25rem, 4.5vw, 3.75rem);
  --fs-h2:   clamp(1.75rem, 3vw, 2.375rem);
  --fs-h3:   1.375rem;
  --fs-lede: 1.15rem;
  --fs-body: 1rem;
  --fs-small:0.875rem;
  --fs-micro:0.75rem;

  /* --- spacing scale --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* --- shape / motion --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.08), 0 6px 20px rgba(0,0,0,0.08);
  --ease: cubic-bezier(.25,.8,.25,1);

  --content-width: 1200px;
  --measure: 68ch;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}