/* Tokens compartidos del Dev Portal. Enlazado en todas las paginas.
   La paleta vivia duplicada byte a byte en el :root de cada HTML; esta es
   ahora la fuente unica. Las variables de estado propias de cada tool
   (--crit/--med/--low de linear, --ok/--warn/--danger de interviews,
   --live/--legacy/... del atlas) se quedan en el <style> de su pagina. */
:root{
  --ground:#F8F1F6;--panel:#FDFBFD;--panel-2:#F5EAF1;
  --asphalt:#241320;--asphalt-2:#34202F;
  --ink:#241320;--muted:#6E5666;--faint:#9A8692;
  --line:#E7D9E3;--line-soft:#F0E6EC;
  --brand:#FAB5ED;--accent:#BE2E93;--accent-deep:#8E2273;--lane:#F5C542;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
}

/* Tokens dependientes de tema (los usan las paginas en vez de hardcodear). */
:root{
  color-scheme: light;
  --field:#fff;              /* fondo de inputs/selects/textareas */
  --on-bg:#241320;           /* pestaña/boton activo */
  --on-fg:#fff;
}

/* Modo oscuro automatico (segun preferencia del sistema). La marca (rosa/carril
   amarillo) se mantiene; el resto de tokens rota a la paleta oscura. */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --ground:#1A0F17;--panel:#241722;--panel-2:#2E1D2A;
    --asphalt:#120A10;--asphalt-2:#1D1119;
    --ink:#F3E6EF;--muted:#C3A9BB;--faint:#8F7787;
    --line:#3D2938;--line-soft:#31212D;
    --brand:#FAB5ED;--accent:#BE2E93;--accent-deep:#F48FD4;--lane:#F5C542;
    --field:#2E1D2A;
    --on-bg:#FAB5ED;--on-fg:#241320;
  }
}

/* El componente <multi-select> (vendorizado, con Shadow DOM) no hereda el tema:
   se le pasan los tokens del portal como custom properties del host para que
   respete claro/oscuro igual que el resto de campos. */
multi-select{
  --multi-select-bg:var(--field);
  --multi-select-dropdown-bg:var(--panel);
  --multi-select-text-color:var(--ink);
  --multi-select-placeholder-color:var(--faint);
  --multi-select-arrow-color:var(--muted);
  --multi-select-border-color:var(--line);
  --multi-select-border-hover:var(--muted);
  --multi-select-border-focus:var(--accent);
  --multi-select-option-hover-bg:var(--panel-2);
  --multi-select-option-selected-bg:color-mix(in srgb, var(--accent) 20%, transparent);
  --multi-select-checkbox-color:var(--accent);
  --multi-select-radius:8px;
}