/* ═══════════════════════════════════════════════════════════
   MANADA ANIMAL · Design Tokens — NuvemShop
   ───────────────────────────────────────────────────────────
   Gerado a partir do design system (Claude Design).
   ATENÇÃO: não usar @import aqui — o tema já carrega a fonte
   via layout.tpl. Renomeados para evitar conflito com o tema:
     --gutter     → --mn-gutter
     --container  → --mn-container
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── CORES PRIMITIVAS ─────────────────────────────────── */

  /* Roxo Manada */
  --mn-purple-900: #2A1456;
  --mn-purple-800: #3A1C72;
  --mn-purple-700: #46217A;
  --mn-purple-600: #592998;
  --mn-purple-500: #7341B8;
  --mn-purple-400: #9A73D0;
  --mn-purple-200: #D9CBF0;
  --mn-purple-100: #EDE5F8;

  /* Magenta / Pink */
  --mn-pink-700:   #8E1A5E;
  --mn-pink-600:   #C0277F;
  --mn-pink-500:   #E544A4;
  --mn-pink-400:   #F06FBE;
  --mn-pink-200:   #FBD2E9;
  --mn-pink-100:   #FDE9F2;

  /* Ouro */
  --mn-gold-600:   #F2A516;
  --mn-gold-500:   #FFC03B;
  --mn-gold-400:   #FFD173;
  --mn-gold-200:   #FFEBBE;
  --mn-gold-100:   #FFF6E1;

  /* Verde */
  --mn-green-600:  #0C9152;
  --mn-green-500:  #10AC61;
  --mn-green-200:  #C6EFD8;
  --mn-green-100:  #E9F8EF;

  /* Laranja */
  --mn-orange-600: #DB7222;
  --mn-orange-500: #F2862E;
  --mn-orange-100: #FDEEE0;

  /* Neutros quentes */
  --mn-0:   #FFFFFF;
  --mn-25:  #FBF9FE;
  --mn-50:  #F6F2FB;
  --mn-100: #EFEAF6;
  --mn-150: #E7E0F1;
  --mn-200: #DDD4EC;
  --mn-300: #C7BBDD;
  --mn-400: #A597C0;
  --mn-500: #857799;
  --mn-600: #665A82;
  --mn-700: #4A3D68;
  --mn-800: #2F2350;
  --mn-900: #1C1038;

  /* ── CORES SEMÂNTICAS ─────────────────────────────────── */
  --surface:        var(--mn-0);
  --surface-sunken: var(--mn-50);
  --bg:             var(--mn-25);
  --line:           var(--mn-200);
  --line-soft:      var(--mn-150);

  --ink:            var(--mn-900);
  --text:           var(--mn-700);
  --text-muted:     var(--mn-500);
  --text-onbrand:   #FFFFFF;

  --accent:         var(--mn-purple-600);
  --accent-press:   var(--mn-purple-700);
  --accent-soft:    var(--mn-purple-100);
  --brand-pink:     var(--mn-pink-500);
  --brand-wine:     var(--mn-pink-700);
  --highlight:      var(--mn-gold-500);
  --positive:       var(--mn-green-500);
  --warning:        var(--mn-orange-500);

  --grad-manada: linear-gradient(160deg, #E544A4 0%, #C0277F 56%, #8E1A5E 100%);
  --grad-manada-rich:
      radial-gradient(120% 120% at 12% 8%,  #FF6FBE 0%, rgba(255,111,190,0) 46%),
      radial-gradient(120% 130% at 92% 14%, #FF3F9E 0%, rgba(255,63,158,0) 44%),
      radial-gradient(130% 120% at 80% 110%,#FFC03B 0%, rgba(255,192,59,0) 36%),
      linear-gradient(160deg, #E544A4 0%, #C0277F 58%, #8E1A5E 100%);
  --grad-ink: linear-gradient(165deg, #2A1456 0%, #1C1038 100%);

  /* ── ALIASES LEGADOS ──────────────────────────────────── */
  --mx-purple:      var(--mn-purple-600);
  --mx-purple-ink:  var(--mn-purple-900);
  --mx-pink:        var(--mn-pink-500);
  --mx-pink-deep:   var(--mn-pink-600);
  --mx-pink-wine:   var(--mn-pink-700);
  --mx-yellow:      var(--mn-gold-500);
  --mx-cream:       #FFFDF7;
  --mx-bg-base:     #A02168;

  --p-purple: var(--mn-purple-600);
  --p-ink:    var(--mn-purple-900);
  --p-pink:   var(--mn-pink-500);
  --p-yellow: var(--mn-gold-500);
  --p-green:  var(--mn-green-500);
  --p-cream:  var(--mn-50);
  --p-line:   var(--mn-200);
  --p-text:   var(--mn-700);

  /* ── TIPOGRAFIA ───────────────────────────────────────── */
  /* Fonte carregada via layout.tpl — apenas tokens aqui */
  --font-brand: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:  var(--font-brand);

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --fs-display: clamp(2.5rem, 1.4rem + 4.4vw, 3.75rem);
  --fs-h1:      clamp(2rem, 1.3rem + 2.8vw, 2.875rem);
  --fs-h2:      clamp(1.625rem, 1.2rem + 1.7vw, 2.25rem);
  --fs-h3:      1.5rem;
  --fs-h4:      1.25rem;
  --fs-lead:    1.125rem;
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.8125rem;
  --fs-2xs:     0.6875rem;

  --lh-tight:   1.12;
  --lh-snug:    1.25;
  --lh-heading: 1.18;
  --lh-body:    1.62;
  --lh-relaxed: 1.7;

  --tr-tight:   -0.02em;
  --tr-snug:    -0.01em;
  --tr-normal:  0;
  --tr-wide:    0.06em;
  --tr-eyebrow: 0.18em;

  /* ── ESCALAS ──────────────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  --section-y: clamp(3.5rem, 2rem + 5vw, 5.5rem);

  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   22px;
  --r-2xl:  28px;
  --r-pill: 999px;

  --sh-xs:  0 1px 2px rgba(42,20,86,.06);
  --sh-sm:  0 2px 8px -2px rgba(42,20,86,.10);
  --sh-md:  0 8px 24px -10px rgba(42,20,86,.16);
  --sh-lg:  0 18px 44px -18px rgba(42,20,86,.24);
  --sh-xl:  0 34px 70px -26px rgba(42,20,86,.32);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.6);
  --sh-purple: 0 14px 30px -12px rgba(89,41,152,.55);
  --sh-pink:   0 14px 30px -12px rgba(229,68,164,.55);
  --sh-gold:   0 14px 30px -12px rgba(242,165,22,.5);

  --ring:      0 0 0 3px rgba(89,41,152,.28);
  --ring-pink: 0 0 0 3px rgba(229,68,164,.28);

  --ease:     cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: .15s;
  --dur:      .25s;
  --dur-slow: .45s;

  /* Layout — nomes prefixados para não colidir com --gutter e
     --container do NuvemShop */
  --mn-container:      1280px;
  --mn-container-wide: 1440px;
  --mn-gutter:         clamp(1rem, 0.4rem + 2.4vw, 2rem);
}

/* ── Helpers tipográficos ───────────────────────────────── */
.mn-display { font: var(--fw-black) var(--fs-display)/var(--lh-tight) var(--font-brand); letter-spacing: var(--tr-tight); color: var(--ink); }
.mn-h1 { font: var(--fw-black) var(--fs-h1)/var(--lh-heading) var(--font-brand); letter-spacing: var(--tr-tight); color: var(--ink); margin: 0; }
.mn-h2 { font: var(--fw-bold) var(--fs-h2)/var(--lh-heading) var(--font-brand); letter-spacing: var(--tr-snug); color: var(--ink); margin: 0; }
.mn-h3 { font: var(--fw-bold) var(--fs-h3)/var(--lh-snug) var(--font-brand); letter-spacing: var(--tr-snug); color: var(--ink); margin: 0; }
.mn-h4 { font: var(--fw-bold) var(--fs-h4)/var(--lh-snug) var(--font-brand); color: var(--ink); margin: 0; }
.mn-lead { font: var(--fw-regular) var(--fs-lead)/var(--lh-relaxed) var(--font-brand); color: var(--text); margin: 0; }
.mn-body { font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-brand); color: var(--text); margin: 0; }
.mn-sm { font: var(--fw-regular) var(--fs-sm)/var(--lh-body) var(--font-brand); color: var(--text); }
.mn-muted { color: var(--text-muted); }
.mn-eyebrow {
  font: var(--fw-bold) var(--fs-2xs)/1 var(--font-brand);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}