/* zoi-crm · tokens. Todo color, espacio y radio sale de aquí; los componentes no llevan hex sueltos.
   Paleta del PLAN_F2 §1: gris frío + UN acento (el azul que ZOI ya usa en sus piezas).
   Semántico: --color-peligro existe solo para errores y acciones destructivas (estado = texto + color, nunca solo color). */
:root {
  color-scheme: light dark;

  /* superficies y texto: escala derivada del fondo */
  --color-fondo: #F5F6F8;
  --color-superficie: #FFFFFF;
  --color-superficie-2: #EDEFF3;
  --color-linea: #E1E4EA;
  --color-linea-fuerte: #C5CAD4;
  --color-borde-control: #7F8899;     /* borde de campos y botones: ≥ 3:1 sobre las superficies (WCAG 1.4.11) */
  --color-texto: #2A2A2A;
  --color-tenue: #5F6875;
  --color-scrim: rgb(24 27 33 / 0.5);
  --sombra-flotante: 0 8px 24px rgb(24 27 33 / 0.16);   /* solo menús desplegables; nada más lleva sombra */

  /* acento único */
  --color-acento: #2E4A8F;
  --color-acento-suave: #E6EBF6;
  --color-acento-fuerte: #223A74;
  --color-sobre-acento: #FFFFFF;

  /* semántico: solo error / destructivo */
  --color-peligro: #A12A2A;
  --color-peligro-suave: #F8E9E9;
  --color-sobre-peligro: #FFFFFF;

  /* tipografía: IBM Plex Sans, una sola familia. Razón (PLAN_F2 §1): la pantalla es de nombres, correos y cifras en
     tablas densas; Plex distingue I l 1 en correos y enlaces, trae cifras tabulares y el español completo. */
  --font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --texto-xs: 0.75rem;
  --texto-sm: 0.8125rem;
  --texto-base: 0.875rem;
  --texto-md: 1rem;
  --texto-lg: 1.25rem;
  --texto-xl: 1.5rem;

  /* retícula de 8 px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* radios: controles chicos, paneles medianos, píldora solo para estado */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-pill: 999px;

  --alto-barra: 48px;
  --alto-control: 36px;
  --alto-tactil: 44px;
  --ancho-contenido: 1120px;
  --ancho-cajon: 480px;
  --duracion: 160ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-fondo: #1B1D21;
    --color-superficie: #24272C;
    --color-superficie-2: #2C3036;
    --color-linea: #343840;
    --color-linea-fuerte: #4A4F58;
    --color-borde-control: #707988;
    --color-texto: #E8EAEE;
    --color-tenue: #A3ABB8;
    --color-scrim: rgb(0 0 0 / 0.6);
    --sombra-flotante: 0 8px 24px rgb(0 0 0 / 0.5);

    --color-acento: #93A9E6;
    --color-acento-suave: #2A3450;
    --color-acento-fuerte: #B3C3F0;
    --color-sobre-acento: #14161A;

    --color-peligro: #F0A0A0;
    --color-peligro-suave: #3A2526;
    --color-sobre-peligro: #14161A;
  }
}