/* ============================================================
   Lyre — Design Tokens
   ============================================================ */

:root {
  /* ---------- Brand colors ---------- */
  --color-cream:      #FAF7F2;
  --color-black:      #1A1A1A;
  --color-terracotta: #C9A687;
  --color-sage:       #E8EDE5;
  --color-forest:     #2D4A3E;
  --color-gold:       #D4A574;

  /* ---------- Semantic colors ---------- */
  --color-bg:              var(--color-cream);
  --color-surface:         #FFFFFF;
  --color-surface-alt:     var(--color-sage);
  --color-text:            var(--color-black);
  --color-text-soft:       rgba(26, 26, 26, 0.72);
  --color-text-muted:      rgba(26, 26, 26, 0.54);
  --color-text-inverse:    var(--color-cream);
  --color-border:          rgba(26, 26, 26, 0.12);
  --color-border-strong:   rgba(26, 26, 26, 0.28);
  --color-border-inverse:  rgba(250, 247, 242, 0.24);
  --color-accent:          var(--color-terracotta);
  --color-accent-deep:     var(--color-forest);

  /* ---------- Typography ---------- */
  --font-sans:  'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-serif: 'Playfair Display', 'Times New Roman', Georgia, serif;

  --fs-2xs:   0.6875rem;   /* 11px — micro caps  */
  --fs-xs:    0.75rem;     /* 12px — eyebrows    */
  --fs-sm:    0.8125rem;   /* 13px — utility     */
  --fs-base:  0.9375rem;   /* 15px — body        */
  --fs-md:    1.0625rem;   /* 17px — large body  */
  --fs-lg:    1.25rem;     /* 20px               */
  --fs-xl:    1.5rem;      /* 24px               */
  --fs-2xl:   2rem;        /* 32px               */
  --fs-3xl:   2.75rem;     /* 44px               */
  --fs-4xl:   clamp(2.5rem, 5vw, 4rem);        /* 40–64 */
  --fs-5xl:   clamp(3rem, 7vw, 5.5rem);        /* 48–88 */
  --fs-display: clamp(3.5rem, 9vw, 7.5rem);    /* big editorial */

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;

  --lh-tight:    1.08;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.7;

  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.08em;
  --ls-widest:   0.22em;

  /* ---------- Spacing ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;
  --space-13: 10rem;

  --section-py:   clamp(4rem, 9vw, 8rem);
  --section-py-lg: clamp(5rem, 11vw, 10rem);

  /* ---------- Layout ---------- */
  --container-max:    1440px;
  --container-wide:   1640px;
  --container-narrow: 960px;
  --container-px:     clamp(1.25rem, 4vw, 3rem);

  /* ---------- Radii ---------- */
  --radius-none:  0;
  --radius-sm:    2px;
  --radius-md:    6px;
  --radius-lg:    16px;
  --radius-arch:  50% 50% 4px 4px / 40% 40% 4px 4px;
  --radius-pill:  999px;

  /* ---------- Header ---------- */
  --header-h:       112px;
  --header-h-compact: 64px;

  /* ---------- Motion ---------- */
  --ease:       cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.55, 0, 0.55, 0.2);
  --dur-fast:   180ms;
  --dur:        400ms;
  --dur-slow:   700ms;
  --dur-reveal: 900ms;

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-md: 0 8px 24px rgba(26, 26, 26, 0.06);
  --shadow-lg: 0 24px 60px rgba(26, 26, 26, 0.10);

  /* ---------- Z-index ---------- */
  --z-base:      1;
  --z-raised:    10;
  --z-header:    100;
  --z-overlay:   500;
  --z-modal:     1000;
}

@media (max-width: 900px) {
  :root {
    --header-h: 88px;
    --header-h-compact: 60px;
  }
}

@media (max-width: 640px) {
  :root {
    --header-h: 72px;
    --header-h-compact: 56px;
  }
}