/* ═══════════════════════════════════════════════════════════════════
   APEX v2 — Design Tokens (Dark)
   Fusão de: paleta dark do apex_pai.html + tipografia editorial da landing.
   Linhas sempre definidas. Contraste funcional. Zero "explosivo".
═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Fundos (escuros, quentes em tons azul-grafite) ──── */
  --bg:        #060809;   /* fundo principal */
  --bg-1:      #0B1018;   /* cards */
  --bg-2:      #111820;   /* cards elevados, inputs */
  --bg-3:      #192230;   /* hover, input activo, cards destacados */
  --bg-4:      #1F2A3A;   /* estados muito activos, modal headers */

  /* ── Tinta (texto) ──────────────────────────────────── */
  --text:      #EDF2F7;
  --text-2:    #7A96B2;
  --text-3:    #3D5570;
  --text-4:    #2A3C54;   /* disabled */

  /* ── Linhas e bordas (a chave do "definido") ──────── */
  --line:      rgba(255, 255, 255, 0.06);
  --line-2:    rgba(255, 255, 255, 0.10);
  --line-3:    rgba(255, 255, 255, 0.18);
  --line-4:    rgba(255, 255, 255, 0.28);
  --line-5:    rgba(255, 255, 255, 0.42);

  /* ── Verde orgânico (accent) ─────────────────────── */
  --green:        #22C28A;
  --green-deep:   #17946A;
  --green-dark:   #0E6248;
  --green-tint:   rgba(34, 194, 138, 0.12);
  --green-tint-2: rgba(34, 194, 138, 0.22);
  --green-glow:   rgba(34, 194, 138, 0.35);

  /* ── Cores de estado ─────────────────────────────── */
  --warn:       #E07B14;
  --warn-tint:  rgba(224, 123, 20, 0.14);
  --crit:       #E03830;
  --crit-tint:  rgba(224, 56, 48, 0.14);
  --info:       #4A90C7;
  --info-tint:  rgba(74, 144, 199, 0.14);
  --ok:         var(--green);
  --ok-tint:    var(--green-tint);

  /* ── Raios ─────────────────────────────────────── */
  --radius-sm:  6px;
  --radius:     10px;
  --radius-md:  10px;   /* alias de --radius para compatibilidade */
  --radius-lg:  14px;
  --radius-xl:  18px;

  /* ── Sombras (dark usa sobretudo elevation + glow) ─ */
  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5),
               0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45),
               0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6),
               0 1px 0 rgba(255, 255, 255, 0.06) inset;
  --shadow-green: 0 0 0 3px var(--green-glow);

  /* ── Tipografia — editorial ──────────────────────── */
  --font-sans:   'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif:  'Fraunces', Georgia, serif;
  --font-mono:   'Geist Mono', 'SF Mono', Menlo, monospace;

  /* ── Espaçamento (4px base) ─────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* ── Transições ─────────────────────────────────── */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.15s;
  --duration:      0.25s;
  --duration-slow: 0.4s;

  /* ── Z-index ────────────────────────────────────── */
  --z-base:     1;
  --z-sticky:   10;
  --z-drawer:   100;
  --z-modal:    200;
  --z-toast:    300;
  --z-tutorial: 400;

  /* ═══════════════════════════════════════════════════
     ALIAS LEGADOS — mapeiam nomes antigos para paleta dark
     Permite que ecrãs existentes funcionem sem reescrita.
     ═══════════════════════════════════════════════════ */

  /* "Paper" (fundos claros no tema antigo) → agora fundos escuros */
  --paper:     var(--bg);
  --paper-2:   var(--bg-1);
  --paper-3:   var(--bg-2);

  /* "Ink" (texto escuro no tema antigo) → texto claro em dark */
  --ink:       var(--text);
  --ink-2:     var(--text);
  --ink-soft:  var(--text-2);

  /* "Mute" (cinzentos) → texto secundário/terciário em dark */
  --mute:      var(--text-2);
  --mute-2:    var(--text-3);

  /* "Green-light" do tema antigo */
  --green-light: var(--green);
  --green-tint-2: var(--green-tint-2);
}