/* ==========================================================================
   DESIGN TOKENS — The Bees on My Bonnet
   ========================================================================== */

:root {
  /* ── Grounds ──────────────────────────────────────────────────────────── */
  --parchment:     #F5EAD7;
  --paper:         #EDD9B5;
  --paper-light:   #FAF5EB;
  --mist:          #E3DAC9;

  /* ── Inks ─────────────────────────────────────────────────────────────── */
  --ink:           #2B1B14;
  --sepia:         #594336;
  --muted:         #8C7464;
  --faint:         #B8A596;

  /* ── Accents ──────────────────────────────────────────────────────────── */
  --gold:          #C89B3C;
  --amber:         #E5B85C;
  --rose:          #B77575;
  --rose-deep:     #8F4F4F;
  --burgundy:      #6E2B35;
  --sage:          #748674;

  /* ── Bee palette ──────────────────────────────────────────────────────── */
  --bee-stripe:    #C89B3C;
  --bee-dark:      #2B1B14;
  --bee-wing:      rgba(244, 248, 250, 0.7);

  /* ── Typography scale (fluid) ─────────────────────────────────────────── */
  --fs-body:       clamp(1.05rem, 0.95rem + 0.5vw, 1.2rem);
  --fs-small:      clamp(0.85rem, 0.78rem + 0.3vw, 0.95rem);
  --fs-h1:         clamp(2.2rem, 1.5rem + 3vw, 3.6rem);
  --fs-h2:         clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  --fs-h3:         clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  --fs-label:      clamp(0.72rem, 0.65rem + 0.3vw, 0.85rem);

  /* ── Spacing ──────────────────────────────────────────────────────────── */
  --space-xs:      0.5rem;
  --space-sm:      1rem;
  --space-md:      1.5rem;
  --space-lg:      2.5rem;
  --space-xl:      4rem;
  --container-max: 900px;
  --reading-max:   720px;

  /* ── Transitions ──────────────────────────────────────────────────────── */
  --ease-gentle:   cubic-bezier(0.25, 1, 0.5, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 200ms;
  --duration-med:  350ms;
  --duration-slow: 600ms;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --shadow-card:   0 2px 12px rgba(44, 24, 16, 0.08);
  --shadow-hover:  0 6px 24px rgba(44, 24, 16, 0.12);
  --shadow-paper:  0 8px 40px rgba(44, 24, 16, 0.10);

  /* ── Borders ──────────────────────────────────────────────────────────── */
  --border-fine:   1px solid var(--mist);
  --border-ornate: 1px double var(--faint);
}