/* GENERADO por «go run ./scripts/contrato» desde contrato/tokens.json: no se edita a mano.
   Tokens de diseño de Amalgama: todo el color, la tipografía, los espacios, los radios y las sombras salen de
   aquí; los componentes de estilos.css usan var(--token). */
:root {
  color-scheme: light;
  /* Marca de Amalgama (propuesta «Acord», diseno/MARCA.md): índigo. Las organizaciones (p. ej. XaranGata) tienen su propia marca: no va aquí */
  --brand-900: #1d175a;
  --brand-800: #2a2180;
  --brand-700: #33289e;
  --brand-600: #3f33c4;
  --brand-500: #4b3fd9;
  --brand-400: #7a70ec;
  --brand-200: #cdc9fb;
  --brand-100: #e7e5fd;
  --brand-50: #f3f2fe;
  /* Barra lateral, entrada y visor: tinta índigo muy oscura en los dos modos; su texto (side-text…) no cambia con la apariencia */
  --side-900: #12112a;
  --side-800: #1b1a3a;
  --side-700: #262452;
  --side-text: #d4d2ea;
  --side-text-muted: #a7a5c4;
  --side-text-subtle: #8583a3;
  /* Secundario: verde azulado (la tercera voz del símbolo). Se llama «azul» por historia: el nombre no cambia */
  --azul-800: #0a4f48;
  --azul-600: #0e7a6f;
  --azul-100: #dcf3ef;
  --azul-50: #eef9f7;
  /* Acento: rosa (la voz del medio del símbolo); para destacar, nunca para errores */
  --rosa-600: #c92a55;
  --rosa-100: #fde6ec;
  /* Grises fríos con un punto de índigo (en oscuro, la escala se invierte) */
  --gray-900: #15142b;
  --gray-800: #24233d;
  --gray-700: #3b3a55;
  --gray-600: #4f4e69;
  --gray-500: #6b6a85;
  --gray-400: #9e9db3;
  --gray-300: #cfcedd;
  --gray-200: #e3e2ee;
  --gray-100: #f0eff7;
  --gray-50: #f7f7fb;
  /* Fondo, superficies, bordes y texto */
  --bg: #f7f7fb;
  --surface: #ffffff;
  --border: #e3e2ee;
  --border-strong: #cfcedd;
  --text: #15142b;
  --text-muted: #5b5a75;
  --text-subtle: #9e9db3;
  /* Estados: éxito, aviso, peligro, información (AA sobre la superficie en los dos modos) */
  --success-600: #1d7a3c;
  --success-100: #dcf3e3;
  --warning-600: #9a5b00;
  --warning-100: #fdf0d5;
  --danger-600: #c22b2b;
  --danger-700: #a32121;
  --danger-100: #fde4e4;
  --info-600: #2d5bc9;
  --info-100: #e2e9fb;
  /* Gráficos: las tres voces del símbolo (índigo, verde azulado, rosa) y rampa secuencial índigo */
  --s1: #4b3fd9;
  --s2: #0e9585;
  --s3: #d9365e;
  --grid: #eceaf3;
  --axis: #cfcedd;
  --seq-0: #f0eff7;
  --seq-1: #e7e5fd;
  --seq-2: #cdc9fb;
  --seq-3: #a9a2f6;
  --seq-4: #7d73ec;
  --seq-5: #4b3fd9;
  --seq-6: #33289e;
  --seq-7: #1d175a;
  /* Manrope (la de la marca, incluida en web/static/fuentes) y, si no está, la del sistema */
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Tamaños de letra */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-base: 14px;
  --text-lg: 15px;
  --text-xl: 17px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --leading: 1.5;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  /* Escala de espacios (márgenes, rellenos y separaciones) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --sidebar-width: 240px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.05);
  --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.08), 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-md: 0 4px 12px rgba(28, 25, 23, 0.08), 0 2px 4px rgba(28, 25, 23, 0.04);
  --shadow-lg: 0 16px 40px rgba(28, 25, 23, 0.16), 0 4px 10px rgba(28, 25, 23, 0.06);
  /* Anillo del foco */
  --ring: 0 0 0 3px rgba(75, 63, 217, 0.28);
}

/* Apariencia oscura. La web aún no la activa (sería con data-tema="oscuro" en <html>); la app ya la usa. */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --brand-900: #dcd9ff;
  --brand-800: #c3beff;
  --brand-700: #8178f5;
  --brand-600: #6a60f0;
  --brand-500: #5b51e6;
  --brand-400: #8a82ff;
  --brand-200: #3a3480;
  --brand-100: #27234f;
  --brand-50: #1c1a3a;
  --side-900: #0b0a1a;
  --side-800: #141331;
  --side-700: #1d1c40;
  --azul-800: #9ae6dc;
  --azul-600: #4fd1c0;
  --azul-100: #123733;
  --azul-50: #0f2a27;
  --rosa-600: #ff7d9c;
  --rosa-100: #3d1824;
  --gray-900: #f1f0fa;
  --gray-800: #e2e1ef;
  --gray-700: #cbcade;
  --gray-600: #a7a5c4;
  --gray-500: #8e8cab;
  --gray-400: #6b6988;
  --gray-300: #46445f;
  --gray-200: #33314c;
  --gray-100: #25233d;
  --gray-50: #1b1a30;
  --bg: #0d0c1a;
  --surface: #17162b;
  --border: #2c2a47;
  --border-strong: #46445f;
  --text: #f1f0fa;
  --text-muted: #a7a5c4;
  --text-subtle: #6b6988;
  --success-600: #57d98a;
  --success-100: #12301d;
  --warning-600: #f5b941;
  --warning-100: #3a2a0c;
  --danger-600: #ff7b7b;
  --danger-700: #ffa3a3;
  --danger-100: #3b1717;
  --info-600: #80a6ff;
  --info-100: #172a45;
  --s1: #8f87ff;
  --s2: #4fd1c0;
  --s3: #ff7d9c;
  --grid: #25233d;
  --axis: #46445f;
  --seq-0: #25233d;
  --seq-1: #27234f;
  --seq-2: #3a3480;
  --seq-3: #4f45b8;
  --seq-4: #6a60f0;
  --seq-5: #8f87ff;
  --seq-6: #b3adff;
  --seq-7: #dcd9ff;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3);
}