/* ============================================================
   WaifuAI-Hub — DESIGN TOKENS (Fase 1)
   Fonte única de verdade do visual. Mudou aqui, muda o site.
   ============================================================ */

:root {
  /* ── MARCA ─────────────────────────────── */
  --brand:       #e91e63;   /* rosa profundo (logo/tema) */
  --accent:      #ff5fa2;   /* rosa principal (botões, links, glow) */
  --accent-2:    #ff2f85;   /* rosa vivo (hover/destaques) */
  --danger:      #ff4444;   /* erros */
  --danger-soft: #ff6b6b;   /* avisos/corações */

  /* ── FUNDOS (do mais escuro pro mais claro) ── */
  --bg-0: #090909;   /* fundo da página */
  --bg-1: #111111;   /* cards nível 1 */
  --bg-2: #1a1a1a;   /* cards nível 2 / inputs */
  --bg-3: #1e1e1e;   /* superfícies elevadas */
  --bg-4: #252525;   /* hover de superfície */

  /* ── BORDAS ─────────────────────────────── */
  --border-1: #222222;
  --border-2: #333333;

  /* ── TEXTO ──────────────────────────────── */
  --white:   #ffffff;
  --text-1:  #eeeeee;   /* títulos */
  --text-2:  #cccccc;   /* corpo */
  --text-3:  #777777;   /* secundário */
  --text-4:  #666666;   /* metadata */
  --text-5:  #555555;   /* desabilitado */

  /* ── TIPOGRAFIA ─────────────────────────── */
  --font-sans: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;

  /* Escala tipográfica (usar em elementos novos) */
  --text-xs:   0.75rem;
  --text-sm:   0.85rem;
  --text-base: 1rem;
  --text-lg:   1.15rem;
  --text-xl:   1.35rem;
  --text-2xl:  1.7rem;
  --text-3xl:  2.2rem;

  /* ── ESPAÇAMENTO (base 4px) ─────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ── RAIOS (só 4 opções daqui pra frente) ─ */
  --radius-sm:   10px;   /* chips, inputs pequenos */
  --radius-md:   14px;   /* inputs, cards internos */
  --radius-lg:   20px;   /* cards, modais */
  --radius-pill: 999px;  /* botões, badges */
  --radius-full: 50%;    /* avatares */

  /* ── SOMBRAS (3 níveis) ─────────────────── */
  --shadow-xl:      0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-glow-sm: 0 4px 14px rgba(255, 95, 162, 0.45);
  --shadow-glow-md: 0 6px 22px rgba(255, 95, 162, 0.45);
  --shadow-glow-lg: 0 8px 30px rgba(255, 95, 162, 0.55);

  /* ── TRANSIÇÕES ─────────────────────────── */
  --t-fast: 0.15s ease;
  --t-med:  0.25s ease;

  /* ── CAMADAS (z-index) ──────────────────── */
  --z-nav:   100;
  --z-modal: 1000;
  --z-toast: 2000;
}

/* ── BASE: fonte da marca em todo o site ───── */
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Seleção com a cor da marca */
::selection {
  background: rgba(255, 95, 162, 0.35);
  color: var(--white);
}

/* Foco visível e bonito (acessibilidade) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scrollbar combinando com o tema */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg-0);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent), var(--brand));
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg-0);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-2); }

/* Respeita quem desativa animações (acessibilidade) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}