/**
 * tokens.css — fuente de verdad visual (Fase 0).
 *
 * Cargar PRIMERO en layout (antes de nav-sidebar / frean / pages).
 * Nuevos estilos: preferí --brand-* / --color-* / --radius-* / --space-*.
 * Compat: --frean-*, --ag-nav-* y --admin-brand-* son aliases (no borrar aún).
 *
 * Override runtime: layout inyecta accent/nav desde config/brand.php.
 *
 * | Token                 | Uso                          |
 * |-----------------------|------------------------------|
 * | --brand-accent        | CTAs, links activos, focus   |
 * | --brand-accent-dark   | hover primary                |
 * | --brand-accent-light  | chips / fondos suaves        |
 * | --brand-nav           | fondo topbar + rail          |
 * | --brand-theme         | theme-color PWA / meta       |
 * | --color-text          | texto cuerpo                 |
 * | --color-muted         | texto secundario             |
 * | --color-surface       | fondo página admin           |
 * | --color-border        | bordes sutiles               |
 * | --radius-card         | cards / paneles              |
 * | --font-sans           | tipografía UI                |
 * | --space-1..4          | espaciado base (0.25–1rem)   |
 */

:root {
  /* —— Canonical brand / color —— */
  --brand-accent: #46ADED;
  --brand-accent-dark: #359cd9;
  --brand-accent-light: #e4f3fd;
  --brand-nav: #2c2f34;
  --brand-theme: #7d89b3;
  --brand-navy: #24445d;

  --color-text: #2c3e50;
  --color-muted: #95a5a6;
  --color-surface: #f8f9fa;
  --color-border: #e7edf3;
  --color-row-alt: #f8fbfd;
  --color-row-hover: #eef8fe;

  --radius-card: 16px;
  --shadow-card: 0 4px 15px rgba(0, 0, 0, 0.05);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;

  /* —— Nav layout (estructura) —— */
  --ag-nav-rail-width: 4rem;
  --ag-nav-expanded-width: 13.5rem;
  --ag-nav-current-width: 4rem;
  --ag-nav-header-height: 4.25rem;
  --ag-nav-transition: 0.22s ease;
  --ag-nav-bg-image: none;

  /* —— Nav colors (aliases de brand) —— */
  --ag-nav-active-color: var(--brand-accent);
  --ag-nav-active-bg: rgba(70, 173, 237, 0.22);
  --ag-nav-text: rgba(255, 255, 255, 0.92);
  --ag-nav-text-muted: rgba(255, 255, 255, 0.65);
  --ag-nav-surface: var(--brand-nav);
  --ag-nav-overlay: rgba(44, 47, 52, 0.78);
  --ag-nav-divider: rgba(255, 255, 255, 0.12);
  --ag-nav-flyout-bg: #2a3038;

  /* —— Compat Frean (componentes existentes) —— */
  --frean-accent: var(--brand-accent);
  --frean-accent-dark: var(--brand-accent-dark);
  --frean-accent-light: var(--brand-accent-light);
  --frean-text: var(--color-text);
  --frean-muted: var(--color-muted);
  --frean-surface: var(--color-surface);
  --frean-card-radius: var(--radius-card);
  --frean-card-shadow: var(--shadow-card);
  --frean-border: var(--color-border);
  --frean-row-alt: var(--color-row-alt);
  --frean-row-hover: var(--color-row-hover);
  --frean-navy: var(--brand-navy);

  /* —— Compat admin-dashboard (app-listado) —— */
  --admin-brand-color: var(--brand-accent);
  --admin-brand-dark: var(--brand-accent-dark);
  --admin-brand-light: var(--brand-accent-light);
}