/**
 * ONLAB Campus — Tokens de diseño del PRODUCTO.
 *
 * Aquí NO hay colores de marca: la paleta de la institución
 * (--color-primary*, --color-accent*, --color-secondary, --color-on-*,
 * --sidebar-*, --focus-ring) la genera scripts/build-installation.mjs en
 * brand.css, que se carga antes que esta hoja. Este fichero sólo define
 * superficies, texto, estados, overlays, sombras, tipografía y espaciado
 * neutros, y es —junto con brand.css— el único sitio con colores literales.
 */
:root {
  /* ---- Superficies ---- */
  --color-white: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #f7f9fc;
  --color-surface-muted: #eef1f6;
  --color-border: #e1e6ee;
  --color-border-strong: #c7cede;

  /* ---- Texto ---- */
  --color-text: #16233d;
  --color-text-secondary: #5b6478;
  --color-text-muted: #8891a1;

  /* ---- Estado ---- */
  --color-success: #2f8f4e;
  --color-success-bg: #e7f6ec;
  --color-warning: #a9760a;
  --color-warning-bg: #fbf1dc;
  --color-danger: #b3261e;
  --color-danger-bg: #fbe9e8;
  --color-info: #2064d6;
  --color-info-bg: #e7effc;
  --color-neutral-bg: #eef1f6;
  --color-on-status: #ffffff;
  --color-shade: #000000;
  --color-danger-hover: #8f1e18;
  --color-accent-deep-hover: color-mix(in srgb, var(--color-accent-deep) 82%, var(--color-shade));

  /* ---- Alertas (borde y texto sobre el fondo de estado) ---- */
  --color-info-border: #c6d9f7;
  --color-info-text: #123a70;
  --color-success-border: #bfe5cb;
  --color-success-text: #164a2a;
  --color-warning-border: #eeddb0;
  --color-warning-text: #5c4108;
  --color-warning-strong: #7f6000;
  --color-danger-border: #eeccca;
  --color-danger-border-strong: #e5b7b3;
  --color-danger-text: #6c1712;

  /* ---- Overlays ---- */
  --color-overlay: rgba(10, 20, 40, 0.45);
  --color-overlay-soft: rgba(10, 20, 40, 0.4);

  /* ---- Tipografía ---- */
  --font-family-base: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-md: 1.0625rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.625rem;
  --font-size-2xl: 2.1rem;
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---- Espaciado ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;

  /* ---- Radios ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Sombras (discretas) ---- */
  --shadow-sm: 0 1px 2px rgba(16, 32, 64, 0.06);
  --shadow-md: 0 4px 16px rgba(16, 32, 64, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 32, 64, 0.12);

  /* ---- Layout ---- */
  --shell-sidebar-width: 264px;
  --shell-sidebar-width-collapsed: 76px;
  --shell-topbar-height: 64px;
  --z-topbar: 40;
  --z-sidebar: 50;
  --z-drawer: 60;
  --z-modal: 70;
  --z-toast: 80;

  /* ---- Transición ---- */
  --transition-base: 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-base: 0ms;
  }
}