/* ==========================================================================
   Lykkehaven Early Learning — Design Tokens
   The single source of truth. Palette, type scale, spacing, motion.
   ========================================================================== */

:root {
  /* ---------- Palette ----------
     Spruce Shadow on Cedar Snow is the dominant pairing.
     Beeswax Linen is the indoor variant. Lake Mist separates.
     Bark types on Beeswax. Lingonberry punctuates.
     Never use all six in one viewport. */
  --spruce: #2F4A3A;        /* primary type, wordmark */
  --cedar:  #D9DCC8;        /* dominant background, "outdoor" */
  --mist:   #A8B7B5;        /* dividers, second-tier headings */
  --beeswax:#EFE7D4;        /* interior panels, cards, "indoor" */
  --bark:   #3A2E25;        /* type on beeswax */
  --lingon: #9C3A2E;        /* accent, one use per page */

  /* derived, low-opacity utilities */
  --spruce-12: rgba(47, 74, 58, 0.12);
  --spruce-20: rgba(47, 74, 58, 0.20);
  --spruce-40: rgba(47, 74, 58, 0.40);
  --spruce-60: rgba(47, 74, 58, 0.60);
  --bark-20:   rgba(58, 46, 37, 0.20);

  /* ---------- Type stacks ---------- */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---------- Type scale (modular, mobile-first) ---------- */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.375rem;  /* 22 */
  --fs-xl:   1.75rem;   /* 28 */
  --fs-2xl:  2.25rem;   /* 36 */
  --fs-3xl:  3rem;      /* 48 */
  --fs-4xl:  4rem;      /* 64 */
  --fs-5xl:  5.5rem;    /* 88 */

  --lh-tight: 1.08;
  --lh-snug:  1.2;
  --lh-base:  1.65;
  --lh-loose: 1.75;

  --tracking-display: -0.01em;
  --tracking-body: 0;
  --tracking-smallcaps: 0.11em;

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

  /* ---------- Layout ---------- */
  --measure: 65ch;        /* prose width target */
  --measure-narrow: 50ch;
  --container: 76rem;     /* 1216px outer cap */
  --container-narrow: 56rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---------- Motion ----------
     Slow scroll-triggered fades. Never bounce. Never spring. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-quick: 200ms;
  --dur-base:  400ms;
  --dur-fade:  700ms;
  --dur-draw:  1500ms;
  --dur-bg:    1200ms;

  /* ---------- Misc ---------- */
  --rule: 1px solid var(--spruce-20);
  --rule-bark: 1px solid var(--bark-20);
  --rule-mist: 1px solid var(--mist);
  --radius: 2px;       /* almost nothing. paper, not glass. */

  /* current section background — animated on scroll */
  --bg-current: var(--cedar);
}

@media (min-width: 48rem) {
  :root {
    --fs-base: 1.0625rem; /* 17 */
    --fs-md:   1.1875rem; /* 19 */
    --fs-lg:   1.5rem;    /* 24 */
    --fs-xl:   2rem;      /* 32 */
    --fs-2xl:  2.75rem;   /* 44 */
    --fs-3xl:  3.75rem;   /* 60 */
    --fs-4xl:  5rem;      /* 80 */
    --fs-5xl:  7rem;      /* 112 */
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-quick: 0ms;
    --dur-base:  0ms;
    --dur-fade:  0ms;
    --dur-draw:  0ms;
    --dur-bg:    0ms;
  }
}