/* ════════════════════════════════════════════════════════════════
   SENAI PORTAL — shared/tokens.css  v1.0
   ARQUIVO NOVO — criar em portal_senai/shared/tokens.css

   Fonte única de verdade para tokens compartilhados entre
   index.html (portal), senai-mvf/ e easa/.

   Ordem de import em cada HTML:
     1. shared/tokens.css   (ou ../shared/tokens.css nas subpastas)
     2. shared/components.css
     3. style.css do app
   ════════════════════════════════════════════════════════════════ */

/* ── TEMA ESCURO (padrão) ─────────────────────────────────── */
:root {
  /* Superfícies */
  --bg-base:     #0a0c10;
  --bg-surface:  #12151e;
  --bg-elevated: #181d28;
  --bg-overlay:  #1e2535;
  --bg-glass:    rgba(255,255,255,0.055);
  --bg-glass-hv: rgba(255,255,255,0.09);

  /* Bordas */
  --border-subtle:  rgba(255,255,255,0.07);
  --border-default: rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.18);

  /* Texto */
  --text-primary:   #f0f2f8;
  --text-secondary: #b0bac8;
  --text-tertiary:  #6a7585;
  --text-disabled:  #383d45;

  /* Tipografia */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;

  /* Radius */
  --radius-xs:   6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  18px;
  --radius-pill: 99px;

  /* Sombras */
  --shadow-sm: 0 2px 12px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.55);

  /* Duração de transições */
  --dur-fast:   150ms;
  --dur-base:   220ms;
  --ease:       cubic-bezier(0.4,0,0.2,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);

  /* Acentos padrão (MVF ciano — sobrescritos por [data-module]) */
  --mod-accent:      #00d4ff;
  --mod-secondary:   #00ff9d;
  --mod-alert:       #ffc040;
  --mod-soft:        rgba(0,212,255,0.10);
  --mod-glow:        rgba(0,212,255,0.25);
  --mod-card-border: rgba(0,212,255,0.20);

  /* Portal raiz */
  --portal-base: #a78bfa;
  --portal-soft: rgba(167,139,250,0.12);
  --portal-glow: rgba(167,139,250,0.22);
}

/* ── TEMA CLARO — ÚNICO SELETOR para os 3 apps ─────────────
   O portal, MVF e EASA usam document.documentElement.dataset.theme
   portanto este seletor [data-theme="light"] é o único necessário.
   NÃO usar html.light — era a causa do bug de sincronização.     */
[data-theme="light"] {
  --bg-base:     #f0f4fb;
  --bg-surface:  #ffffff;
  --bg-elevated: #f8f8f8;
  --bg-overlay:  #eef2f9;
  --bg-glass:    rgba(0,0,0,0.04);
  --bg-glass-hv: rgba(0,0,0,0.07);

  --border-subtle:  rgba(0,0,0,0.06);
  --border-default: rgba(0,0,0,0.10);
  --border-strong:  rgba(0,0,0,0.18);

  --text-primary:   #0d1117;
  --text-secondary: #374151;
  --text-tertiary:  #6b7280;
  --text-disabled:  #9ca3af;

  --shadow-sm: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.12);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.14);
}

/* ── ACENTOS POR MÓDULO ──────────────────────────────────── */
[data-module="mvf"] {
  --mod-accent:      #00d4ff;
  --mod-secondary:   #00ff9d;
  --mod-alert:       #ffc040;
  --mod-soft:        rgba(0,212,255,0.10);
  --mod-glow:        rgba(0,212,255,0.25);
  --mod-card-border: rgba(0,212,255,0.20);
}

[data-module="easa"] {
  --mod-accent:      #10b981;
  --mod-secondary:   #84cc16;
  --mod-alert:       #d97706;
  --mod-soft:        rgba(16,185,129,0.10);
  --mod-glow:        rgba(16,185,129,0.25);
  --mod-card-border: rgba(16,185,129,0.20);
}

/* Acentos light por módulo */
[data-theme="light"] [data-module="mvf"],
[data-theme="light"][data-module="mvf"] {
  --mod-accent:      #0284c7;
  --mod-soft:        rgba(2,132,199,0.10);
  --mod-glow:        rgba(2,132,199,0.20);
  --mod-card-border: rgba(2,132,199,0.22);
}

[data-theme="light"] [data-module="easa"],
[data-theme="light"][data-module="easa"] {
  --mod-accent:      #059669;
  --mod-soft:        rgba(5,150,105,0.10);
  --mod-glow:        rgba(5,150,105,0.20);
  --mod-card-border: rgba(5,150,105,0.22);
}

/* ── RESET MÍNIMO COMPARTILHADO ──────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--bg-base);
  color: var(--text-primary);
  overflow-x: hidden;
  line-height: 1.65;
}

::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: var(--radius-pill); }

:focus-visible {
  outline: 2px solid var(--mod-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ── GRIDS RESPONSIVOS ──────────────────────────────────── */
.grid   { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); }

/* ── ANIMAÇÕES COMPARTILHADAS ───────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes spin        { to { transform:rotate(360deg); } }
@keyframes pulse-dot {
  0%,100% { box-shadow:0 0 0   0   var(--mod-glow); }
  50%     { box-shadow:0 0 8px 3px var(--mod-glow); }
}
@keyframes stv-fill {
  0%   { opacity:.8; transform:scaleY(1); }
  100% { opacity:.5; transform:scaleY(.88); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}