/*
 * IACL Comms — tokens de diseño (copia de apps/portal-web/src/styles/tokens.css).
 *
 * Monocromo, sin azules: negro y gris mate en oscuro, blanco y grises en claro. El acento es el
 * propio contraste. Solo llevan color los estados (correcto, aviso, error). Lo vigila
 * tools/docs/landing-colors.mjs, que falla si aparece un azul o un violeta.
 *
 * El tema: `data-theme="light|dark"` en <html> lo fija; sin él, manda el sistema.
 */

:root {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --fs-12: .75rem;
  --fs-13: .8125rem;
  --fs-14: .875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-48: 3rem;

  --radius-control: 8px;
  --radius-card: 12px;

  /* Claro, por defecto */
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --surface-2: #F4F4F4;
  --surface-3: #EBEBEB;
  --border: #E5E5E5;
  --border-strong: #CFCFCF;
  --text: #0A0A0A;
  --text-muted: #525252;
  --text-subtle: #737373;
  --accent: #0A0A0A;
  --accent-hover: #262626;
  --on-accent: #FFFFFF;
  --success: #1F7A3D;
  --warning: #8A5A00;
  --danger: #C42B22;
  --shadow: 0 1px 2px rgb(0 0 0 / .04), 0 4px 16px rgb(0 0 0 / .04);
  --sil: #DEDEDE;
  --halo: rgb(0 0 0 / .07);
  --shadow-demo: 0 1px 2px rgb(0 0 0 / .04), 0 28px 72px -16px rgb(0 0 0 / .18);
  --close-shadow: rgb(0 0 0 / .14);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0A0A;
    --surface: #121212;
    --surface-2: #181818;
    --surface-3: #202020;
    --border: #262626;
    --border-strong: #3A3A3A;
    --text: #EDEDED;
    --text-muted: #A1A1A1;
    --text-subtle: #8A8A8A;
    --accent: #EDEDED;
    --accent-hover: #FFFFFF;
    --on-accent: #0A0A0A;
    --success: #4CAF6A;
    --warning: #D4A13A;
    --danger: #E5534B;
    --shadow: none;
    --sil: #2C2C2C;
    --halo: rgb(255 255 255 / .075);
    --shadow-demo: 0 32px 96px -24px rgb(0 0 0 / .9);
    --close-shadow: rgb(0 0 0 / .7);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0A0A0A;
  --surface: #121212;
  --surface-2: #181818;
  --surface-3: #202020;
  --border: #262626;
  --border-strong: #3A3A3A;
  --text: #EDEDED;
  --text-muted: #A1A1A1;
  --text-subtle: #8A8A8A;
  --accent: #EDEDED;
  --accent-hover: #FFFFFF;
  --on-accent: #0A0A0A;
  --success: #4CAF6A;
  --warning: #D4A13A;
  --danger: #E5534B;
  --shadow: none;
  --sil: #2C2C2C;
  --halo: rgb(255 255 255 / .075);
  --shadow-demo: 0 32px 96px -24px rgb(0 0 0 / .9);
  --close-shadow: rgb(0 0 0 / .7);
  color-scheme: dark;
}