/* ============================================================
   Ethical Clothing — Redesign (Boutique + Manrope)
   Design tokens only. Layout / components live in sibling files.
   ============================================================ */

:root {
  /* --------- palette: sage + warm neutrals --------- */
  --bg:         #f5f1ea;   /* warm paper — page background */
  --bg-alt:     #ece5d7;   /* oatmeal — alternate section bg */
  --surface:    #ffffff;   /* card / raised surface */
  --ink:        #1f2419;   /* primary text / buttons */
  --ink-2:      #4a4d42;   /* body copy */
  --ink-3:      #7a7d71;   /* tertiary / meta */
  --line:       #cfc8b8;   /* hairlines */
  --line-2:     #bfb8a5;   /* stronger dividers */
  --sage:       #5a6b4e;   /* primary accent */
  --sage-deep:  #384031;   /* top-bar / hover */
  --sage-tint:  #dee1d3;   /* subtle sage wash */
  --clay:       #a86b42;   /* sale / alert accent */

  /* --------- typography --------- */
  --font-display: 'Manrope', 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Manrope', 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* base body */
  --fs-body: 15px;
  --lh-body: 1.55;

  /* modular scale — clamp so it downshifts on mobile */
  --fs-display: clamp(40px, 6vw, 88px);
  --lh-display: 1.02;
  --fs-h1:      clamp(32px, 3.5vw, 54px);
  --lh-h1:      1.08;
  --fs-h2:      clamp(24px, 2vw,   32px);
  --lh-h2:      1.15;
  --fs-h3:      15px;
  --lh-h3:      1.3;

  --tracking-display: -0.035em;  /* boutique: sans display gets tighter tracking */
  --tracking-h1:      -0.025em;
  --tracking-h2:      -0.02em;
  --tracking-eyebrow:  0.14em;

  /* --------- geometry --------- */
  --radius:     0px;         /* boutique: sharp corners */
  --radius-lg:  0px;
  --container: 1440px;
  --gutter:     32px;

  /* --------- rhythm --------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;

  /* --------- misc --------- */
  --header-h: 78px;
  --topbar-h: 36px;
  --transition-fast: 120ms ease;
  --transition-med:  200ms ease;

  /* z layers */
  --z-header: 50;
  --z-modal: 200;
  --z-toast: 300;
}

/* --------- accessibility: honor reduced motion --------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-med:  0ms;
  }
}

/* Phones: 32px side gutters leave 256px of content on a 320px screen. */
@media (max-width: 480px) {
  :root { --gutter: 20px; }
}