/* ==========================================================================
   MamiHammer Studio — Design tokens
   Source of truth for color, type, space, radius, shadow and motion.
   Change a value here and every page + the docs update.
   ========================================================================== */
:root {
  /* ---- Brand palette (sampled from the 2026 asset pack) ---- */
  --navy-950: #05081A;
  --navy-900: #070B1F;   /* page background, PFP backdrop */
  --navy-800: #0B1230;   /* banner background */
  --navy-700: #121B45;   /* cards */
  --navy-600: #1A2559;   /* raised surfaces, hover */
  --ink:      #1F2A5C;   /* sticker outline navy (logo linework) */

  --lav-200: #EBDDF7;    /* old-site lavender paper */
  --lav-300: #D9C8FF;
  --lav-400: #C3A6FF;
  --lav-500: #A77DFF;    /* brand purple — wordmark fill */
  --lav-600: #8257F0;    /* pacifier ring */
  --lav-700: #5B36C4;

  --cyan-300: #9CF6FF;
  --cyan-400: #5CF0FF;
  --cyan-500: #27E1F5;   /* STUDIO wordmark, brush handles */
  --cyan-600: #14B9D6;

  --pink-300: #FFB5E6;
  --pink-400: #FF8AD8;   /* brush tips */
  --pink-500: #FF3DBB;   /* paint splat */
  --pink-600: #D81E96;

  --yellow-300: #FFE98A;
  --yellow-400: #FFD93D; /* star, splat */
  --yellow-500: #F2C318;

  --blue-400: #5BB8FF;
  --blue-500: #2E9BF0;   /* blue splat */
  --blue-600: #1E7AC8;

  --paper:      #FFF7FB; /* off-white with the old site's pink warmth */
  --paper-pink: #FBE4EC; /* old-site primary background */
  --white:      #FFFFFF;

  /* ---- Semantic (dark theme — default) ---- */
  --bg:            var(--navy-900);
  --bg-elev:       var(--navy-800);
  --surface:       var(--navy-700);
  --surface-hover: var(--navy-600);
  --outline:       rgba(195,166,255,.18);
  --outline-strong:rgba(195,166,255,.42);
  --text:          #F3F1FF;
  --text-2:        #C9C6E6;
  --text-3:        #8F8CB4;
  --accent:        var(--lav-500);
  --accent-2:      var(--cyan-500);
  --accent-3:      var(--pink-500);
  --accent-4:      var(--yellow-400);
  --on-accent:     var(--navy-950);
  --focus:         var(--cyan-400);
  --sticker-ring:  var(--white);
  --sticker-ink:   var(--ink);

  /* ---- Typography ---- */
  --font-display: "Fredoka", "Baloo 2", "Nunito", system-ui, sans-serif;
  --font-body:    "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale (min at 360px → max at 1440px) */
  --fs-xs:   clamp(.72rem, .70rem + .10vw, .78rem);
  --fs-sm:   clamp(.84rem, .80rem + .18vw, .94rem);
  --fs-base: clamp(1.00rem, .96rem + .22vw, 1.125rem);
  --fs-md:   clamp(1.125rem,1.05rem + .40vw, 1.35rem);
  --fs-lg:   clamp(1.35rem, 1.20rem + .75vw, 1.80rem);
  --fs-xl:   clamp(1.80rem, 1.45rem + 1.70vw, 2.80rem);
  --fs-2xl:  clamp(2.40rem, 1.80rem + 3.00vw, 4.20rem);
  --fs-3xl:  clamp(3.00rem, 2.00rem + 5.00vw, 6.00rem);
  --lh-tight: 1.02;
  --lh-snug:  1.18;
  --lh-body:  1.6;

  /* ---- Space (4px base) ---- */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem;   --s-7: 3rem;  --s-8: 4rem;   --s-9: 6rem; --s-10: 8rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --measure: 62ch;
  --container: 1280px;
  --container-wide: 1520px;

  /* ---- Shape ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Elevation + sticker effect ---- */
  --shadow-1: 0 2px 6px rgba(5,8,26,.35);
  --shadow-2: 0 10px 30px -10px rgba(5,8,26,.65);
  --shadow-3: 0 30px 60px -20px rgba(5,8,26,.8);
  --glow-lav:  0 0 0 1px rgba(167,125,255,.35), 0 12px 40px -8px rgba(167,125,255,.55);
  --glow-cyan: 0 0 0 1px rgba(39,225,245,.35), 0 12px 40px -8px rgba(39,225,245,.55);
  --glow-pink: 0 0 0 1px rgba(255,61,187,.35), 0 12px 40px -8px rgba(255,61,187,.55);
  /* "Sticker" = navy ink ring + white paper ring, like every asset in the pack */
  --sticker: 0 0 0 3px var(--sticker-ink), 0 0 0 6px var(--sticker-ring);
  --sticker-sm: 0 0 0 2px var(--sticker-ink), 0 0 0 4px var(--sticker-ring);

  /* ---- Motion ---- */
  --d-instant: 90ms;
  --d-fast:    160ms;
  --d-base:    260ms;
  --d-slow:    420ms;
  --d-reveal:  700ms;
  --d-wipe:    760ms;                              /* menu sheet paint wipe */
  --ease-out:   cubic-bezier(.22, 1, .36, 1);     /* glide */
  --ease-pop:   cubic-bezier(.34, 1.56, .64, 1);  /* sticker pop (overshoot) */
  --ease-wipe:  cubic-bezier(.65, 0, .35, 1);     /* brush stroke: slow start, slow finish */
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-bounce:cubic-bezier(.68,-.55,.27,1.55);
  --stagger: 70ms;

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-instant: 0ms; --d-fast: 0ms; --d-base: 0ms; --d-slow: 0ms; --d-reveal: 0ms; --d-wipe: 0ms; --stagger: 0ms;
  }
}