/* Tokens do atelie-cida. A cor nunca vai pro template: template usa var().
   Bloco de marca = saida do paleta.py para #3387E9 (tema claro). */

:root {
  /* Marca */
  --accent: #3387E9;
  --accent-hover: #1872DC;
  --accent-escura: #135AAD;
  --accent-suave: #E7EFF8;
  --accent-soft: rgba(51, 135, 233, 0.12);
  --accent-sombra: rgba(51, 135, 233, 0.15);
  --accent-texto: #1872DC;
  --texto-sobre-accent: #000000;

  /* Textos */
  --text: #1f2733;
  --texto: var(--text);
  --texto-secundario: var(--text-dim);
  --texto-fraco: #8b949e;
  --texto-suave: #8b949e;
  --text-dim: #667085;
  --muted: var(--text-dim);

  /* Superficies e botoes */
  --bg: #f4f6f9;
  --bg-elev: #ffffff;
  --fundo: var(--bg-elev);
  --surface: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.7);
  --border: #dfe4ea;

  /* Estados */
  --success: #2ecc71;
  --danger: #e74c3c;
  --warning: #f1c40f;
  /* Fase 7: fundo suave e texto legivel de cada estado (par claro/escuro). */
  --success-soft: #e6f6ec;
  --success-texto: #15803d;
  --danger-texto: #b91c1c;
  --warning-soft: #fdf3c8;
  --warning-texto: #7a5b00;

  /* Tipografia */
  --font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titulo: "Sora", "Inter", sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 26px;

  /* Espacos */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* Raio e sombra (valores do Padrao_Box_Card) */
  --raio: 12px;
  --raio-sm: 8px;
  --raio-lg: 18px;
  --raio-full: 9999px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  --blur: blur(12px);

  /* Casca e componentes */
  --sidebar-width: 248px;
  --topbar-h: 60px;
  --fu-h: 38px;
}

/* Tema escuro: par de token por superficie e texto. */
:root[data-tema="dark"] {
  --accent-hover: #589DED;

  --bg: #0d0f12;
  --bg-elev: #14171c;
  --surface: #1a1e24;
  --surface-glass: rgba(26, 30, 36, 0.6);
  --border: #262b33;
  --success-soft: rgba(46, 204, 113, 0.14);
  --success-texto: #5fdc92;
  --danger-texto: #ff8a7d;
  --warning-soft: rgba(241, 196, 15, 0.16);
  --warning-texto: #f3d54e;
  --text: #e8eaed;
  --texto: var(--text);
  --texto-secundario: var(--text-dim);
  --texto-fraco: #5c646e;
  --texto-suave: #5c646e;
  --text-dim: #9aa0a8;

  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}