/* ==========================================================================
   Sandalo — design tokens
   Source of truth: docs/design-specification.md, sections 2, 3, 11, 12.
   ========================================================================== */

:root {
  /* ---- Colour (spec section 3) ---------------------------------------- */
  --olive-500: #62624B;   /* brand olive — verified from the logo */
  --olive-700: #4A4A38;   /* hover / pressed, footer, factory band */
  --olive-900: #2F2F24;   /* text on light olive tints */
  --olive-100: #E8E8DF;   /* selected chips, focus background, tags */
  --cream:     #F5F2EB;   /* page background */
  --white:     #FFFFFF;
  --stone:     #E4E4E3;   /* alternate section background */
  --sage-grey: #D7D7D2;   /* hairlines, borders, input underlines */
  --ink:       #1C1C17;   /* headings and body text */
  --graphite:  #54595F;   /* secondary text, meta */
  /* Text roles (refinement 9 Nov 2026): a warm hierarchy instead of one very
     dark tone everywhere. All pass WCAG AA on cream, stone, olive-100 and white
     (text-muted on stone: 5.1:1). --ink and --graphite stay in the palette. */
  --text-strong: #26251F; /* headlines, titles                    13.7:1 on cream */
  --text:        #3B3A33; /* body text, nav, form values           10.2:1 on cream */
  --text-muted:  #5F5E55; /* secondary text, meta, labels, hints    5.8:1 on cream */
  --error:     #A63D2F;   /* functional only */
  --success:   #4F6B3A;   /* functional only */
  --tagline:   #A8A290;   /* logo tagline colour — used only inside the logo files */

  /* ---- Typography (spec section 2) ------------------------------------
     TYPOGRAPHY DEPENDENCY: --font-serif is a TEMPORARY placeholder
     (Playfair Display) until Sandalo confirms its Instagram headline serif.
     Swap the family name here only; the scale below stays.               */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(2.75rem, 1.98rem + 3.28vw, 5.5rem);  /* 44 → 88  */
  --fs-h1:      clamp(2.25rem, 1.8rem + 1.91vw, 3.5rem);   /* 36 → 56  */
  --fs-h2:      clamp(1.875rem, 1.66rem + 0.94vw, 2.5rem); /* 30 → 40  */
  --fs-h3:      clamp(1.1875rem, 1.13rem + 0.24vw, 1.375rem); /* 19 → 22  */
  --fs-lead:    clamp(1.1875rem, 1.14rem + 0.19vw, 1.3125rem); /* 19 → 21 */
  --fs-body:    clamp(1rem, 0.98rem + 0.09vw, 1.0625rem);  /* 16 → 17  */
  --fs-small:   0.875rem;                                   /* 14       */
  --fs-eyebrow: 0.8125rem;                                  /* 13       */
  --fs-button:  0.9375rem;                                  /* 15       */
  --fs-stat:    clamp(2.75rem, 2.2rem + 2.35vw, 4.5rem);   /* 44 → 72  */

  --lh-display: 1.06;   /* room for Turkish marks: â, İ, ğ */
  --lh-h1: 1.1;
  --lh-h2: 1.18;
  --lh-h3: 1.3;
  --lh-lead: 1.55;
  --lh-body: 1.65;

  /* ---- Spacing (4-based scale) ---------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-6: 24px;
  --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; --sp-32: 128px; --sp-40: 160px;

  /* Vertical padding per section side: ~40 px on mobile (→ 80 px between
     sections, spec 11) and 80 px on desktop (→ 160 px, spec 1A/2). */
  --section-y: clamp(40px, 1.6rem + 2.4vw, 80px);

  /* ---- Layout ---------------------------------------------------------- */
  --container-max: 1440px;
  --gutter: 16px;       /* 4-column mobile */
  --margin: 20px;       /* outer page margin */
  --header-h: 60px;

  /* ---- Shape ----------------------------------------------------------- */
  --radius: 2px;
  --hairline: 1px solid var(--sage-grey);

  /* ---- Motion (spec section 12) --------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 700ms;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; --margin: 48px; }
}
@media (min-width: 1024px) {
  :root { --margin: 96px; --header-h: 88px; }
}