/* ============================================================
   Wunderlust — design tokens
   Painterly-gouache palette derived from the mood board:
   high-key sky, saturated meadow, blossom accent, warm paper.
   Every foreground/background pairing below was contrast-checked
   to WCAG AA before being committed (see tools/check_contrast.py).
   ============================================================ */

:root {
  /* --- Brand hues ------------------------------------------ */
  --sky-1:      #7EC8F2;   /* upper sky wash        */
  --sky-2:      #BFE6F7;   /* horizon haze          */
  --cloud:      #FDFEFF;
  --meadow:     #7BC24A;   /* foreground grass      */
  --meadow-mid: #57A03C;
  --meadow-deep:#2E6B3A;   /* treeline, AA on paper */
  --blossom:    #F2789F;   /* decorative only: petals in the hero  */
  --blossom-mid:#D4537F;   /* button fill; 3.9:1 under white text   */
  --blossom-dp: #CF3F70;   /* pressed-pill fill; 4.6:1 under white  */
  --blossom-ink:#B8375F;   /* accent as text; 5.3:1 on paper        */
  --terracotta: #D9642A;   /* rooftops              */
  --butter:     #F6D785;

  /* --- Light surfaces (warm printed paper) ----------------- */
  --paper:      #FBF8F3;
  --paper-2:    #FFFFFF;
  --paper-3:    #F3EEE5;
  --ink:        #1D2A21;   /* 13.4:1 on paper       */
  --ink-2:      #4A5A4F;   /*  6.8:1 on paper       */
  --ink-3:      #5F6E63;   /*  5.1:1 on paper, 4.7:1 on surface-2 */
  --hairline:   #E4DCCF;

  /* --- Semantic -------------------------------------------- */
  --bg:         var(--paper);
  --surface:    var(--paper-2);
  --surface-2:  var(--paper-3);
  --text:       var(--ink);
  --text-2:     var(--ink-2);
  --text-3:     var(--ink-3);
  --line:       var(--hairline);
  --accent:     var(--blossom-ink);
  --accent-fill:var(--blossom-mid);
  /* A filled pill carries a small TEXT label, so it needs 4.5:1 —
     --accent-fill only ever had to clear 3:1 as a button background.
     Same job/contrast mismatch that forced the first accent split. */
  --accent-press:var(--blossom-dp);
  --on-accent:  #FFFFFF;
  --focus:      #0B63C5;

  /* --- Type ------------------------------------------------ */
  --font-display: "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --fs-hero:  clamp(2.2rem, 4.6vw, 3.4rem);
  --fs-h2:    clamp(1.45rem, 2.4vw, 1.9rem);
  --fs-h3:    1.12rem;
  --fs-body:  0.975rem;
  --fs-sm:    0.85rem;
  --fs-xs:    0.75rem;
  --lh-tight: 1.08;
  --lh-body:  1.5;

  /* --- Shape & depth --------------------------------------- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(29,42,33,.06), 0 2px 8px rgba(29,42,33,.05);
  --shadow-2: 0 2px 6px rgba(29,42,33,.07), 0 12px 28px rgba(29,42,33,.09);
  --shadow-3: 0 8px 20px rgba(29,42,33,.10), 0 30px 60px rgba(29,42,33,.14);

  /* --- Rhythm ---------------------------------------------- */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 24px;
  --gap-6: 32px;
  --gap-7: 48px;
  --maxw: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   Dusk mode — not an inversion. The same landscape after
   sunset: indigo sky, moonlit meadow, blossom warmed up so it
   still clears AA against a dark surface.
   ============================================================ */
:root[data-mode="dark"] {
  --sky-1:      #1B2A4A;
  --sky-2:      #2E4468;
  --cloud:      #3A5075;
  --meadow:     #2F5E3C;
  --meadow-mid: #275033;
  --meadow-deep:#16321F;
  --blossom:    #F58FAE;
  --blossom-mid:#E8688E;
  --blossom-ink:#FFA8C2;
  --terracotta: #C2643B;

  --bg:         #10161A;
  --surface:    #1A2227;
  --surface-2:  #232D33;
  --text:       #F0F3F1;   /* 14.1:1 on surface */
  --text-2:     #B6C2BB;   /*  7.3:1 on surface */
  --text-3:     #8E9C95;   /*  4.8:1 on surface */
  --line:       #2F3A40;
  --accent:     var(--blossom-ink);
  --accent-fill:#E8688E;
  /* Dusk needs no darker variant: dark ink on #E8688E is already
     6.26:1, so the same fill serves both the button and the pill. */
  --accent-press:#E8688E;
  --on-accent:  #1A0810;
  --focus:      #6FB4FF;

  --shadow-1: 0 1px 2px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.28);
  --shadow-2: 0 2px 6px rgba(0,0,0,.38), 0 12px 28px rgba(0,0,0,.42);
  --shadow-3: 0 8px 20px rgba(0,0,0,.44), 0 30px 60px rgba(0,0,0,.52);
}

@media (prefers-reduced-motion: reduce) {
  :root { --ease: linear; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}