/* ───────────────────────────────────────────────────────────────────────────
   Cocoon — "Cotton" design tokens for the web
   Mirrors COCOON_DESIGN.md §8 (Sorbet light · Twilight dark). The token VALUES
   are the brand and never change; sections re-map the *semantic* layer to move
   the page between warm cream daylight and a cozy plum night.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Sorbet palette (raw) ─────────────────────────────────────────────── */
  --cream:      #FFF9F2;   /* app background (light)            */
  --cream-deep: #FBEFE2;   /* a slightly warmer cream for layering */
  --cocoa:      #5D4A55;   /* primary ink — warm plum-brown, never black */
  --cocoa-soft: #6E5A65;
  --fawn:       #9B8B93;   /* secondary text                   */
  --fawn-soft:  #B6A8AF;

  --blush:      #FFD6E0;   /* primary accent, hearts, FAB      */
  --blush-deep: #FBB1CB;   /* cheeks / stronger rose           */
  --peach:      #FFE3CF;   /* warm accents, streaks            */
  --butter:     #FFF1C1;   /* highlights, stars                */
  --mint:       #D7F2E3;   /* success, done                    */
  --mint-deep:  #BFE8CF;   /* leaves on cream                  */
  --sky:        #D6EAF8;   /* info, links, calendar            */
  --lilac:      #E8DDF5;   /* focus, night, AI ✨ chips        */
  --lilac-deep: #D9C8F0;
  --amber:      #FFE0B8;   /* "wilted"/overdue — never red     */

  /* ── Butterfly (matches the app's procedural ButterflyView §8.2) ───────────
     Every butterfly is symmetric: one wing color + one accent for spots, body
     and antennae — never a dark body. Per-instance colors come from the real
     species palette (see js/main.js SPECIES); these are the Blush Drifter
     default for any butterfly rendered without an override. */
  --bf-wing:    #FFD6E0;
  --bf-accent:  #E8A7B7;

  /* ── Twilight palette (raw) ───────────────────────────────────────────── */
  --plum:       #2A2330;   /* night background                 */
  --plum-lift:  #342B3D;   /* raised night surface             */
  --plum-card:  #3B3145;   /* night card                       */
  --cream-night:#F4ECF5;   /* ink on night                     */
  --fawn-night: #B9A9C4;

  /* desaturated ~20% pastels for night */
  --blush-night:  #E7B9C6;
  --peach-night:  #E6C8B2;
  --butter-night: #E8DCAE;
  --mint-night:   #B7D9C6;
  --sky-night:    #B9D2E6;
  --lilac-night:  #CFC0E2;

  /* ── Semantic layer (light / Sorbet by default) ───────────────────────── */
  --bg:          var(--cream);
  --bg-warm:     var(--cream-deep);
  --surface:     #FFFFFF;
  --surface-2:   #FFFDFA;
  --ink:         var(--cocoa);
  --ink-2:       var(--cocoa-soft);
  --ink-soft:    var(--cocoa-soft);  /* secondary prose — AA on cream & pastels (fawn #9B8B93 fails) */
  --ink-faint:   var(--fawn-soft);   /* decorative only (done-task strikethrough) — never reading text */
  --accent:      var(--blush);
  --accent-ink:  var(--blush-deep);
  --ink-hand:    #8A5566;            /* deep rose for handwritten (Caveat) lines — AA, still warm */
  --hairline:    rgba(93, 74, 85, 0.08);   /* never a real border — a whisper */

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-body:    "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-hand:    "Caveat", "Segoe Script", cursive;

  --fs-hero:   clamp(2.7rem, 7.5vw, 5.5rem);
  --fs-h1:     clamp(2.1rem, 5vw, 3.5rem);
  --fs-h2:     clamp(1.6rem, 3.4vw, 2.4rem);
  --fs-h3:     clamp(1.2rem, 2.2vw, 1.5rem);
  --fs-lead:   clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body:   1.05rem;
  --fs-small:  0.9rem;
  --lh-tight:  1.08;
  --lh-snug:   1.32;
  --lh-body:   1.62;

  /* ── Shape ────────────────────────────────────────────────────────────── */
  --r-chip:   999px;
  --r-card:   24px;
  --r-sheet:  28px;
  --r-pill:   18px;
  --r-blob:   46% 54% 52% 48% / 54% 46% 54% 46%;  /* hand-drawn blob */

  /* ── Soft, blush-tinted shadows (never gray) ──────────────────────────── */
  --sh-1:  0 2px 10px rgba(251, 177, 203, 0.16), 0 1px 2px rgba(93, 74, 85, 0.04);
  --sh-2:  0 10px 26px rgba(251, 177, 203, 0.20), 0 4px 10px rgba(93, 74, 85, 0.06);
  --sh-3:  0 22px 50px rgba(232, 161, 188, 0.26), 0 8px 20px rgba(93, 74, 85, 0.07);
  --sh-lilac: 0 16px 40px rgba(168, 139, 214, 0.24);

  /* ── Motion — springs, never linear (§8.3) ────────────────────────────── */
  --spring:   cubic-bezier(0.34, 1.56, 0.64, 1);   /* playful overshoot   */
  --settle:   cubic-bezier(0.22, 1, 0.36, 1);      /* gentle for content  */
  --entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:   180ms;
  --t-med:    280ms;
  --t-slow:   460ms;

  /* ── Spacing rhythm ───────────────────────────────────────────────────── */
  --space-section: clamp(4.5rem, 11vh, 9rem);
  --maxw: 1180px;
  --maxw-prose: 60ch;
}

/* ── Twilight: cozy night, applied per-section via .night ──────────────── */
.night {
  --bg:        var(--plum);
  --bg-warm:   var(--plum-lift);
  --surface:   var(--plum-card);
  --surface-2: var(--plum-lift);
  --ink:       var(--cream-night);
  --ink-2:     var(--cream-night);
  --ink-soft:  var(--fawn-night);
  --ink-faint: rgba(185, 169, 196, 0.7);
  --accent:    var(--blush-night);
  --accent-ink:var(--blush-night);
  --hairline:  rgba(244, 236, 245, 0.10);
  --sh-1:  0 2px 12px rgba(0, 0, 0, 0.28);
  --sh-2:  0 12px 30px rgba(0, 0, 0, 0.34);
  --sh-3:  0 24px 56px rgba(0, 0, 0, 0.42);
  --sh-lilac: 0 18px 44px rgba(0, 0, 0, 0.40);
}

/* ── Base reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--ink);
  letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: 3px solid var(--blush-deep); outline-offset: 3px; border-radius: 6px; }

::selection { background: var(--butter); color: var(--cocoa); }