/* ============================================================
   MIRA CAPITAL · Copa 2026 — Design Tokens
   Banco digital pra profissionais. Roxo profundo + lavanda.
   Vibe Mercury × Nubank × Robinhood. Geométrico, premium, calmo.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- Cores Mira oficiais ---------- */
  --royal:         #4F1B85;   /* roxo royal profundo — primária dark */
  --violet:        #7B3FE4;   /* violeta vibrante — primária */
  --orchid:        #A78BFA;   /* meio-tom */
  --lavender:      #C4B5FD;   /* acento claro */
  --mist:          #EDE9FE;   /* tintura suave */
  --whisper:       #F5F3FF;   /* quase branco */

  /* ---------- Neutros premium ---------- */
  --ink:           #1A1232;   /* preto-roxo profundo */
  --ink-70:        #1A1232b3;
  --ink-50:        #1A123280;
  --ink-30:        #1A12324d;
  --paper:         #FAF9FF;   /* papel tintura roxa quase branca */
  --cream:         #FFFFFF;
  --white:         #ffffff;
  --slate:         #6B6580;   /* cinza-roxo pra meta */

  /* ---------- Premium accent ---------- */
  --rose-gold:     #E0B68F;
  --champagne:     #F5DEB3;

  /* ---------- Funcionais ---------- */
  --success:       #10B981;
  --error:         #EF4444;

  /* ---------- Tipografia — geométrica fintech ---------- */
  --font-display:  'Space Grotesk', system-ui, sans-serif;
  --font-body:     'Manrope', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;

  /* ---------- Raios — modernos, suaves ---------- */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-full: 999px;

  /* ---------- Sombras — refinadas ---------- */
  --shadow-card:    0 4px 16px rgba(26,18,50,0.08), 0 1px 4px rgba(26,18,50,0.06);
  --shadow-sticker: 0 12px 32px rgba(79,27,133,0.18), 0 2px 8px rgba(79,27,133,0.12);
  --shadow-glow:    0 0 60px rgba(123,63,228,0.35);
  --shadow-card-lift: 0 16px 40px rgba(26,18,50,0.18);

  --sticker-aspect: 3 / 4;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* Grain sutil pra profundidade */
.grain {
  position: relative;
}
.grain::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(123,63,228,0.04) 0, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(79,27,133,0.06) 0, transparent 50%);
  pointer-events: none;
}