/* -------------------------------------------------------------
   Mana Cores v2 — design tokens
   Playful maximalist on warm cream
   ------------------------------------------------------------- */

:root {
  /* Core palette */
  --cream:        #FFF1D4;
  --cream-deep:   #F6E2B6;
  --cream-soft:   #FFF8E8;
  --ink:          #0F0E0C;
  --ink-soft:     #3E3A33;
  --ink-mute:     rgba(15, 14, 12, 0.55);
  --paper:        #FAF3E0;

  /* Accent colors — vivid on cream */
  --pink:    #FF2D78;
  --lime:    #C6FF3D;
  --azure:   #1F6FEB;
  --purple:  #7C3AED;
  --yellow:  #FFD23F;
  --coral:   #FF6B5B;
  --mint:    #2FD086;

  /* Aliases */
  --brand-accent: var(--pink);
  --available:    var(--mint);

  /* Fonts
     Bricolage Grotesque — heavy, rounded display
     Instrument Serif — italic serif accent
     Caveat — handwritten stickers/annotations
     DM Sans — body
  */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-serif:   "Instrument Serif", "Times New Roman", serif;
  --font-hand:    "Caveat", "Bradley Hand", cursive;
  --font-body:    "DM Sans", system-ui, sans-serif;

  /* Scale */
  --size-hero:    clamp(3rem, 13vw, 10.5rem);
  --size-h2:      clamp(2.35rem, 6.2vw, 5rem);
  --size-h3:      clamp(1.45rem, 2.4vw, 2.05rem);
  --size-lead:    clamp(1.2rem, 1.75vw, 1.5rem);
  --size-body:    1.15rem;
  --size-small:   0.95rem;
  --size-tiny:    0.8rem;

  /* Radius */
  --r-sm:   10px;
  --r-md:   18px;
  --r-lg:   28px;
  --r-xl:   42px;
  --r-pill: 999px;

  /* Shadow — chunky, playful */
  --shadow-stamp:   4px 4px 0 var(--ink);
  --shadow-stamp-lg: 8px 8px 0 var(--ink);
  --shadow-soft:    0 12px 28px rgba(15, 14, 12, 0.10);
  --shadow-card:    0 18px 40px rgba(15, 14, 12, 0.14);

  /* Spacing */
  --s-2xs: 0.35rem;
  --s-xs:  0.6rem;
  --s-sm:  1rem;
  --s-md:  1.75rem;
  --s-lg:  3rem;
  --s-xl:  5rem;
  --s-2xl: 8rem;

  /* Layout */
  --max:        1320px;
  --max-narrow: 960px;
  --nav-h:      72px;

  /* Motion */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (max-width: 720px) {
  :root {
    --s-xl: 3.75rem;
    --s-2xl: 5.5rem;
  }
}