/* ==========================================================================
   tokens.css — the whole design system in one place.
   Palette: "pastel dream" (reel 2). Change a value here, the site follows.
   ========================================================================== */

:root {
  /* --- colour ----------------------------------------------------------- */
  --blush:      #FDF4F5;   /* page ground                                   */
  --cream:      #FFFBF7;   /* raised paper (cards, letters, polaroids)      */
  --pink:       #F7CAD0;   /* primary accent                               */
  --pink-deep:  #E79AA6;   /* accent on accent, hover                      */
  --sky:        #CDE7F0;   /* secondary accent, cloud tops                 */
  --sky-deep:   #A8D2E2;
  --lilac:      #E2D6F0;   /* third accent, constellation night            */
  --gold:       #E8C4A0;   /* sparkle, candle flame, "special" markers     */
  --gold-deep:  #C99B6E;

  --ink:        #5A4048;   /* body text — warm near-black, never pure #000  */
  --ink-soft:   #7E646C;   /* secondary text — 5.4:1 on --blush            */
  /* Tertiary labels (countdown units, scroll cue). The prettier #B9A5AC sat
     at ~2.3:1, which is unreadable on a phone in a dim room. This is 4.6:1
     and still reads as quiet. */
  --ink-faint:  #937C86;

  --night:      #2E2438;   /* constellation section ground                 */
  --night-soft: #4A3B58;

  /* --- surfaces & lines -------------------------------------------------- */
  --paper-line: #E6D9DD;   /* the ruled lines on letter paper              */
  --hairline:   rgba(90, 64, 72, .12);
  --tape:       rgba(247, 202, 208, .55);

  /* --- elevation — soft only. No hard shadows in this palette. ----------- */
  --lift-1: 0 2px 10px rgba(122, 86, 96, .07);
  --lift-2: 0 8px 28px rgba(122, 86, 96, .10);
  --lift-3: 0 20px 60px rgba(122, 86, 96, .14);
  --glow-pink: 0 0 40px rgba(247, 202, 208, .55);
  --glow-gold: 0 0 24px rgba(232, 196, 160, .70);

  /* --- type -------------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-script:  "Petit Formal Script", "Cormorant Garamond", cursive;
  --font-body:    "Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand:    "Caveat", "Segoe Script", cursive;

  /* fluid scale — clamp(min, preferred, max) so it never needs breakpoints */
  --t-xs:   clamp(0.72rem, 0.68rem + 0.20vw, 0.82rem);
  --t-sm:   clamp(0.84rem, 0.80rem + 0.22vw, 0.95rem);
  --t-base: clamp(0.98rem, 0.93rem + 0.28vw, 1.12rem);
  --t-lg:   clamp(1.15rem, 1.05rem + 0.50vw, 1.45rem);
  --t-xl:   clamp(1.50rem, 1.25rem + 1.20vw, 2.30rem);
  --t-2xl:  clamp(2.10rem, 1.60rem + 2.40vw, 3.60rem);
  --t-3xl:  clamp(2.80rem, 1.90rem + 4.20vw, 5.40rem);

  --lh-tight: 1.14;
  --lh-body:  1.68;
  --track-wide: 0.16em;

  /* --- space — one 4px-rooted ramp used everywhere ---------------------- */
  --s-1:  4px;   --s-2:  8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;   --s-6: 32px;   --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;   --s-10: 128px;

  --section-pad: clamp(56px, 10vh, 112px);
  --gutter:      clamp(20px, 5vw, 40px);
  --measure:     64ch;          /* max line length for readable prose      */
  --content-max: 720px;

  /* --- shape ------------------------------------------------------------- */
  --r-sm:  8px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  36px;
  --r-pill: 999px;

  /* --- motion ------------------------------------------------------------ */
  /* Named curves so timing reads as intent, not as magic numbers.          */
  --ease-out:   cubic-bezier(.22, 1, .36, 1);      /* things arriving       */
  --ease-in:    cubic-bezier(.64, 0, .78, 0);      /* things leaving        */
  --ease-soft:  cubic-bezier(.4, 0, .2, 1);        /* neutral               */
  /* Slight overshoot, reserved for objects that physically overshoot:
     a balloon popping, a gift lid lifting, a petal springing open.
     Deliberately gentle (1.28, not the cartoonish 1.5+). Never use it on
     text, cards, modals or anything that arrives rather than bursts.      */
  --ease-pop:   cubic-bezier(.34, 1.28, .64, 1);

  --d-fast:  180ms;
  --d-base:  340ms;
  --d-slow:  680ms;
  --d-bloom: 1600ms;

  /* --- layering ---------------------------------------------------------- */
  --z-art:     1;
  --z-content: 10;
  --z-sticky:  50;
  --z-modal:   100;
  --z-gate:    1000;
  --z-confetti: 1200;
}

/* Respect the OS setting. Everything still *works*, it just stops moving.  */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-bloom: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}