/* ============================================================
   LANGWIZARD — Paleta de Cores & Tokens de Design
   Variáveis CSS por tema (light / dark) + @font-face

   SISTEMA DE CORES:
   • Cor predominante: AZUL (--jade, --jade-soft, --jade-deep)
   • Mago Roxo  (Tool)   : --purple-* — NÃO alterar
   • Mago Amarelo (Skill): --gold, --gold-deep — NÃO alterar
   • Mago Vermelho (Prompt): --ember — NÃO alterar
   • Linhas de diagrama  : --diag-* — NÃO alterar
   ============================================================ */

@font-face {
  font-family: "Aeonik";
  src: url("fonts/Aeonik-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("fonts/Aeonik-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Input Mono served via JetBrains Mono (Google Fonts fallback) */

/* ---- Tema claro ---- */
:root[data-theme="light"] {
  /* fundos */
  --bg:              #f8faff;   /* azul-branco quase puro */
  --bg-2:            #f0f4ff;   /* azul muito claro */
  --surface:         #ffffff;
  --surface-2:       #eef3ff;   /* superfície azulada */
  --surface-3:       #dce7ff;   /* superfície azul médio */

  /* texto */
  --text:            #06103a;   /* navy escuro */
  --text-dim:        #384068;   /* navy médio */
  --text-faint:      #5a6480;   /* navy suave */

  /* bordas */
  --border:          rgba(6,16,58,.10);
  --border-strong:   rgba(6,16,58,.17);

  /* ── AZUL — cor predominante do site ── */
  --jade:            #1540d4;   /* blue-600 — primário */
  --jade-soft:       #4a6ef5;   /* blue-500  */
  --jade-deep:       #0e2fa8;   /* blue-700  */

  /* ── MAGO AMARELO — não alterar ── */
  --gold:            #ff8e30;
  --gold-deep:       #e6a704;

  /* ── MAGO VERMELHO — não alterar ── */
  --ember:           #f2545b;

  /* ── MAGO ROXO (internos, para acento de card/wire do Tool) ── */
  --purple:          #7c24b4;
  --purple-soft:     #a742ed;
  --purple-deep:     #470696;

  /* efeitos */
  --glow:            rgba(21,64,212,.20);
  --atmos-1:         rgba(74,110,245,.10);
  --atmos-2:         rgba(255,142,48,.06);
  --code-bg:         #000e24;
  --grain-opacity:   0;

  /* sombras */
  --shadow:          0 1px 3px rgba(21,64,212,.17), 0 0 0 1px rgba(14,47,168,.06);
  --shadow-hover:    0 8px 28px rgba(255,140,46,.33), 0 1px 3px rgba(255,140,46,.40), 0 0 0 1px rgba(255,140,46,.05);
  --code-glow:       0 0 120px rgba(74,110,245,.24), 0 0 5px rgba(74,110,245,.28);

  /* ── DIAGRAMA — não alterar ── */
  --diag-wire:       #8aaac8;
  --diag-flow:       #1e3a6e;
  --diag-flow-out:   #2d5a9e;
}

/* ---- Tema escuro ---- */
:root[data-theme="dark"] {
  /* fundos */
  --bg:              #020a1c;   /* navy quase preto */
  --bg-2:            #060e26;   /* navy muito escuro */
  --surface:         #0b1535;   /* superfície navy */
  --surface-2:       #101e42;   /* superfície navy médio */
  --surface-3:       #162b58;   /* superfície navy claro */

  /* texto */
  --text:            #fdfdff;
  --text-dim:        #c3cade;   /* azul-acinzentado claro */
  --text-faint:      #9aa2bb;   /* azul-acinzentado suave */

  /* bordas */
  --border:          rgba(255,255,255,.10);
  --border-strong:   rgba(255,255,255,.18);

  /* ── AZUL — cor predominante do site ── */
  --jade:            #7baaf7;   /* azul claro (dark mode) */
  --jade-soft:       #c0d2ff;   /* azul muito claro */
  --jade-deep:       #4a6ef5;   /* azul médio */

  /* ── MAGO AMARELO — não alterar ── */
  --gold:            #ffc976;
  --gold-deep:       #ff8e30;

  /* ── MAGO VERMELHO — não alterar ── */
  --ember:           #f6a8aa;

  /* ── MAGO ROXO (internos, para acento de card/wire do Tool) ── */
  --purple:          #bf7ff8;
  --purple-soft:     #d2caff;
  --purple-deep:     #a742ed;

  /* efeitos */
  --glow:            rgba(74,110,245,.42);
  --atmos-1:         rgba(74,110,245,.20);
  --atmos-2:         rgba(255,142,48,.10);
  --code-bg:         #000918;
  --grain-opacity:   0;

  /* sombras */
  --shadow:          0 24px 70px -28px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.05);
  --shadow-hover:    0 0 0 1px rgba(123,170,247,.45), 0 18px 50px -18px rgba(74,110,245,.5);
  --code-glow:       0 0 120px rgba(74,110,245,.30), 0 0 5px rgba(74,110,245,.34);

  /* ── DIAGRAMA — não alterar ── */
  --diag-wire:       #3a5570;
  --diag-flow:       #5b8ec4;
  --diag-flow-out:   #4a7ab0;
}