/* =============================================================================
   SUGARLUMP DESIGN SYSTEM — Design Tokens
   "Confectionery Lab": warm cream paper, candy accents, ink structure,
   blueprint/lab cues. All primitives live here as CSS custom properties.
   Consume these tokens — never hard-code raw values in components.
   ============================================================================= */

:root {
  /* --- Brand color primitives ------------------------------------------- */
  --c-cream-50:  #fffdf9;
  --c-cream-100: #fbf4e9;   /* page paper */
  --c-cream-200: #f5ead8;
  --c-cream-300: #ecdcc3;
  --c-cream-400: #ddc9a9;

  --c-ink-900: #211915;     /* primary text / structure */
  --c-ink-800: #34281f;
  --c-ink-700: #4c3d33;
  --c-ink-500: #8a7565;     /* muted text */
  --c-ink-300: #c3b3a2;

  --c-raspberry:       #ec4067;   /* primary candy */
  --c-raspberry-deep:  #d22a53;
  --c-raspberry-soft:  #fbdae2;

  --c-mint:       #12b892;        /* secondary candy */
  --c-mint-deep:  #0a9a79;
  --c-mint-soft:  #cdefe4;

  --c-amber:      #ff9e1b;        /* accent / caramel */
  --c-amber-deep: #e8850a;
  --c-amber-soft: #ffe6bd;

  --c-blueberry:      #4f52d6;    /* cool "AI" note */
  --c-blueberry-soft: #dcddf7;

  --c-white: #ffffff;

  /* --- Semantic surface & text (LIGHT is the default theme) ------------- */
  --bg:            var(--c-cream-100);
  --bg-elevated:   var(--c-cream-50);
  --bg-sunken:     var(--c-cream-200);
  --surface:       var(--c-white);
  --surface-2:     var(--c-cream-50);
  --line:          #e7d8c2;               /* hairline borders */
  --line-strong:   var(--c-ink-900);

  --text:          var(--c-ink-900);
  --text-soft:     var(--c-ink-700);
  --text-muted:    var(--c-ink-500);
  --text-inverse:  var(--c-cream-50);

  --primary:       var(--c-raspberry);
  --primary-deep:  var(--c-raspberry-deep);
  --primary-soft:  var(--c-raspberry-soft);
  --secondary:     var(--c-mint);
  --secondary-deep:var(--c-mint-deep);
  --secondary-soft:var(--c-mint-soft);
  --accent:        var(--c-amber);
  --accent-soft:   var(--c-amber-soft);
  --cool:          var(--c-blueberry);
  --cool-soft:     var(--c-blueberry-soft);

  --focus-ring:    var(--c-blueberry);

  /* --- Blueprint / texture --------------------------------------------- */
  --grid-dot:      rgba(33, 25, 21, 0.10);
  --grid-line:     rgba(33, 25, 21, 0.055);
  --grain-opacity: 0.038;

  /* --- Typography ------------------------------------------------------- */
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Fluid type scale (clamp: min / preferred / max) */
  --fs-eyebrow: 0.78rem;
  --fs-xs:  clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --fs-sm:  clamp(0.9rem, 0.87rem + 0.2vw, 1rem);
  --fs-md:  clamp(1rem, 0.96rem + 0.28vw, 1.15rem);
  --fs-lg:  clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --fs-xl:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --fs-2xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.3rem);
  --fs-3xl: clamp(2.9rem, 2rem + 4.4vw, 5.2rem);
  --fs-4xl: clamp(3.6rem, 2.2rem + 6.6vw, 7rem);

  --lh-tight: 1.02;
  --lh-snug:  1.14;
  --lh-body:  1.62;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-eyebrow: 0.22em;

  /* --- Spacing scale (4px base) ---------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* --- Radius (chunky / candy) ----------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-2xl: 48px;
  --r-pill: 999px;

  /* --- Shadows: soft "candy drop" + hard "sticker" offset -------------- */
  --shadow-sm: 0 2px 6px rgba(33, 25, 21, 0.06), 0 1px 2px rgba(33, 25, 21, 0.05);
  --shadow-md: 0 10px 24px -8px rgba(33, 25, 21, 0.16), 0 4px 8px -4px rgba(33, 25, 21, 0.08);
  --shadow-lg: 0 26px 50px -18px rgba(33, 25, 21, 0.28), 0 8px 16px -8px rgba(33, 25, 21, 0.10);
  --shadow-pop: 5px 6px 0 var(--c-ink-900);      /* chunky sticker edge */
  --shadow-pop-primary: 5px 6px 0 var(--c-raspberry-deep);
  --shadow-focus: 0 0 0 4px var(--cool-soft), 0 0 0 6px var(--focus-ring);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-med:  260ms;
  --dur-slow: 520ms;

  /* --- Z-index ---------------------------------------------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 1000;
}

/* =============================================================================
   DARK THEME — "Dark chocolate + candy"
   Applies via system preference OR explicit [data-theme="dark"].
   ============================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #261b13;
    --bg-elevated: #31241a;
    --bg-sunken:   #1e150d;
    --surface:     #35281c;
    --surface-2:   #3f2f22;
    --line:        #4c3a2a;
    --line-strong: #f4e7d6;

    --text:        #f6ecde;
    --text-soft:   #e0d2c1;
    --text-muted:  #b3a08f;
    --text-inverse:#211915;

    --primary:     #ff5b7e;
    --primary-deep:#ff7e98;
    --primary-soft:#4a2029;
    --secondary:   #2fd4ac;
    --secondary-deep:#57e0bf;
    --secondary-soft:#12352c;
    --accent:      #ffb448;
    --accent-soft: #4a3413;
    --cool:        #8f92f2;
    --cool-soft:   #262766;

    --grid-dot:    rgba(246, 236, 222, 0.10);
    --grid-line:   rgba(246, 236, 222, 0.05);
    --grain-opacity: 0.05;

    --shadow-pop:  5px 6px 0 #000000;
    --shadow-pop-primary: 5px 6px 0 var(--primary-deep);
    --shadow-md: 0 10px 24px -8px rgba(0,0,0,0.5), 0 4px 8px -4px rgba(0,0,0,0.4);
    --shadow-lg: 0 26px 50px -18px rgba(0,0,0,0.6), 0 8px 16px -8px rgba(0,0,0,0.4);
  }
}

/* Explicit dark toggle (wins regardless of system pref) */
:root[data-theme="dark"] {
  --bg:          #261b13;
  --bg-elevated: #31241a;
  --bg-sunken:   #1e150d;
  --surface:     #35281c;
  --surface-2:   #3f2f22;
  --line:        #4c3a2a;
  --line-strong: #f4e7d6;

  --text:        #f6ecde;
  --text-soft:   #e0d2c1;
  --text-muted:  #b3a08f;
  --text-inverse:#211915;

  --primary:     #ff5b7e;
  --primary-deep:#ff7e98;
  --primary-soft:#4a2029;
  --secondary:   #2fd4ac;
  --secondary-deep:#57e0bf;
  --secondary-soft:#12352c;
  --accent:      #ffb448;
  --accent-soft: #4a3413;
  --cool:        #8f92f2;
  --cool-soft:   #262766;

  --grid-dot:    rgba(246, 236, 222, 0.10);
  --grid-line:   rgba(246, 236, 222, 0.05);
  --grain-opacity: 0.05;

  --shadow-pop:  5px 6px 0 #000000;
  --shadow-pop-primary: 5px 6px 0 var(--primary-deep);
  --shadow-md: 0 10px 24px -8px rgba(0,0,0,0.5), 0 4px 8px -4px rgba(0,0,0,0.4);
  --shadow-lg: 0 26px 50px -18px rgba(0,0,0,0.6), 0 8px 16px -8px rgba(0,0,0,0.4);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-slow: 0ms;
  }
}