/* ============================================================
   Atelier Linnea — Design Tokens
   Single source of truth for colour, type, spacing & motion.
   ============================================================ */

:root {
  /* ---- Colour: the studio palette (bone, ink, terracotta, olive) ---- */
  --paper:        #f4f0e8;   /* page ground — warm bone            */
  --paper-2:      #ebe5d9;   /* alt section ground                 */
  --cream:        #faf7f1;   /* raised cards on paper              */
  --ink:          #211d17;   /* primary text — deep espresso        */
  --ink-2:        #40392e;   /* secondary text                      */
  --muted:        #6f6759;   /* tertiary text                       */
  --line:         rgba(33, 29, 23, 0.14);
  --line-strong:  rgba(33, 29, 23, 0.30);
  --accent:       #b0613c;   /* terracotta — the warm accent        */
  --accent-deep:  #8f4b2c;
  --accent-soft:  #e5c9b5;
  --olive:        #757a63;   /* quiet secondary green               */
  --dark:         #211d17;   /* dark surfaces (footer, bands)       */
  --dark-2:       #2b261e;
  --dark-line:    rgba(244, 240, 232, 0.14);
  --white:        #ffffff;

  /* ---- Typography ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.55rem, 5.2vw + 1.1rem, 4.85rem);  /* hero h1   */
  --fs-h1:      clamp(2.1rem, 3.6vw + 0.9rem, 3.6rem);    /* page hero */
  --fs-h2:      clamp(1.7rem, 2.6vw + 0.8rem, 2.75rem);   /* sections  */
  --fs-h3:      clamp(1.2rem, 1.1vw + 0.85rem, 1.55rem);  /* cards     */
  --fs-lead:    clamp(1.05rem, 0.55vw + 0.9rem, 1.28rem);
  --fs-body:    1rem;
  --fs-sm:      0.925rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.76rem;

  --lh-display: 1.06;
  --lh-heading: 1.18;
  --lh-body:    1.72;

  --tracking-wide: 0.14em;
  --tracking-mid:  0.06em;

  /* ---- Layout ---- */
  --container: 1280px;
  --narrow:     960px;
  --gutter:     clamp(1.25rem, 4vw, 2.5rem);
  --sec:        clamp(4.5rem, 9vw, 8.5rem);   /* section vertical rhythm  */
  --sec-sm:     clamp(3rem, 6vw, 5rem);
  --header-h:   88px;
  --header-h-s: 70px;

  /* ---- Radii ---- */
  --r-s:    8px;
  --r-m:    16px;
  --r-l:    28px;
  --r-xl:   40px;
  --r-arch: 999px 999px 18px 18px;

  /* ---- Elevation ---- */
  --shadow-1: 0 1px 2px rgba(33, 29, 23, 0.05), 0 10px 30px -14px rgba(33, 29, 23, 0.22);
  --shadow-2: 0 2px 4px rgba(33, 29, 23, 0.06), 0 26px 60px -24px rgba(33, 29, 23, 0.35);

  /* ---- Motion ---- */
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-2: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:    0.45s;
  --dur-f:  0.9s;
  --dur-s:  0.28s;

  /* ---- Misc ---- */
  --focus-ring: 0 0 0 3px var(--paper), 0 0 0 6px var(--accent);
}

/* Dark surfaces get their own token set */
[data-theme='dark'] {
  --paper:      var(--dark);
  --paper-2:    var(--dark-2);
  --cream:      var(--dark-2);
  --ink:        #f4f0e8;
  --ink-2:      #cfc7b8;
  --muted:      #a39a89;
  --line:       rgba(244, 240, 232, 0.14);
  --line-strong: rgba(244, 240, 232, 0.32);
}