/*
 * qAccess — tokens del design system del portal
 *
 * Fuente: Manual de Identidad de QuantumLabs (2019).
 *   Marca:  naranja  #E2724B  (Pantone P 37-7 C)
 *           oscuro   #040918  (Pantone Black 6C)
 *           tipografía Libre Franklin
 * Todo lo demás (neutros, estados, gráficas, modo claro) es DERIVADO para el portal
 * y está validado con contraste WCAG AA (ver design-system/README.md).
 *
 * Tema: sigue al sistema; se fuerza con <html data-theme="light|dark">.
 */

:root {
  /* ---------- Marca (no modificar) ---------- */
  --brand-orange: #E2724B;
  --brand-dark: #040918;

  /* ---------- Tipografía ---------- */
  --font-sans: "Libre Franklin", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.8125rem;  /* 13 */
  --text-md: 0.9375rem;  /* 15 — cuerpo */
  --text-lg: 1.0625rem;  /* 17 */
  --text-xl: 1.25rem;    /* 20 */
  --text-2xl: 1.5rem;    /* 24 */
  --text-3xl: 1.875rem;  /* 30 */
  --text-4xl: 2.25rem;   /* 36 — cifras KPI */

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* ---------- Espaciado (base 4 px; la marca nace de una retícula cuadrada) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ---------- Forma: esquinas casi rectas, como el isotipo ---------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 999px;

  --border-width: 1px;
  --focus-width: 2px;

  /* ---------- Layout ---------- */
  --sidebar-width: 15rem;
  --topbar-height: 3.5rem;
  --content-max: 80rem;

  /* ---------- Movimiento ---------- */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Barra lateral: siempre en la combinación principal de la marca ---------- */
  --sidebar-bg: var(--brand-dark);
  --sidebar-border: #1A2238;
  --sidebar-text: #A2A9BC;
  --sidebar-text-active: #ECEEF4;
  --sidebar-item-hover: #0F1730;
  --sidebar-item-active: #161F3A;
  --sidebar-indicator: var(--brand-orange);

  /* ---------- Capas ---------- */
  --z-sticky: 10;
  --z-overlay: 40;
  --z-modal: 50;
  --z-toast: 60;

  color-scheme: light;

  /* ---------- Colores: modo claro ---------- */
  --color-bg: #F5F6F9;
  --color-surface: #FFFFFF;
  --color-surface-2: #EEF0F4;
  --color-surface-inverse: var(--brand-dark);
  --color-border: #D9DDE6;
  --color-border-strong: #8790A4;   /* bordes de campos (3:1) */

  --color-text: #0A1024;
  --color-text-muted: #535C72;
  --color-text-subtle: #6B7387;   /* placeholders y deshabilitado */
  --color-text-inverse: #ECEEF4;

  --color-accent: var(--brand-orange);       /* rellenos, indicadores, foco */
  --color-on-accent: var(--brand-dark);      /* texto sobre naranja (6.4:1) */
  --color-accent-hover: #D9653D;
  --color-accent-text: #B04A24;              /* enlaces y texto naranja sobre claro */
  --color-accent-soft: #FBE7DF;

  --color-success: #1A7246;
  --color-success-soft: #E2F3EA;
  --color-warning: #946100;
  --color-warning-soft: #FBF0D9;
  --color-danger: #C42B3B;
  --color-danger-hover: #A92332;
  --color-danger-soft: #FBE4E6;
  --color-info: #2F62C4;
  --color-info-soft: #E3ECFB;

  /* Gráficas (Chart.js): categóricas, en este orden */
  --chart-1: #E2724B;
  --chart-2: #3F6FD1;
  --chart-3: #1F9A8A;
  --chart-4: #8A63D2;
  --chart-5: #A87C0F;
  --chart-6: #C9508F;
  --chart-grid: #E4E7EE;
  --chart-axis: #535C72;

  --shadow-sm: 0 1px 2px rgb(4 9 24 / 0.06);
  --shadow-md: 0 4px 12px rgb(4 9 24 / 0.08), 0 1px 3px rgb(4 9 24 / 0.06);
  --shadow-lg: 0 16px 40px rgb(4 9 24 / 0.16);
  --overlay: rgb(4 9 24 / 0.5);
}

/* ---------- Colores: modo oscuro (formato "nocturno" de la marca) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #040918;
    --color-surface: #0B1226;
    --color-surface-2: #131B33;
    --color-surface-inverse: #ECEEF4;
    --color-border: #262F4A;
    --color-border-strong: #5A6482;

    --color-text: #ECEEF4;
    --color-text-muted: #A2A9BC;
    --color-text-subtle: #7D859B;
    --color-text-inverse: #040918;

    --color-accent-hover: #EA8460;
    --color-accent-text: #EE8B67;
    --color-accent-soft: #2A1A1A;

    --color-success: #4CC38A;
    --color-success-soft: #0E2A22;
    --color-warning: #F0B54A;
    --color-warning-soft: #2A2414;
    --color-danger: #F2707C;
    --color-danger-hover: #F58A94;
    --color-danger-soft: #2D151C;
    --color-info: #7FA6F2;
    --color-info-soft: #13213F;

    --chart-1: #E2724B;
    --chart-2: #6F97EC;
    --chart-3: #3BBBA9;
    --chart-4: #A98BEA;
    --chart-5: #E0B640;
    --chart-6: #E27AB0;
    --chart-grid: #1C2540;
    --chart-axis: #A2A9BC;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.6);
    --overlay: rgb(0 0 0 / 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #040918;
  --color-surface: #0B1226;
  --color-surface-2: #131B33;
  --color-surface-inverse: #ECEEF4;
  --color-border: #262F4A;
  --color-border-strong: #5A6482;

  --color-text: #ECEEF4;
  --color-text-muted: #A2A9BC;
  --color-text-subtle: #7D859B;
  --color-text-inverse: #040918;

  --color-accent-hover: #EA8460;
  --color-accent-text: #EE8B67;
  --color-accent-soft: #2A1A1A;

  --color-success: #4CC38A;
  --color-success-soft: #0E2A22;
  --color-warning: #F0B54A;
  --color-warning-soft: #2A2414;
  --color-danger: #F2707C;
  --color-danger-hover: #F58A94;
  --color-danger-soft: #2D151C;
  --color-info: #7FA6F2;
  --color-info-soft: #13213F;

  --chart-1: #E2724B;
  --chart-2: #6F97EC;
  --chart-3: #3BBBA9;
  --chart-4: #A98BEA;
  --chart-5: #E0B640;
  --chart-6: #E27AB0;
  --chart-grid: #1C2540;
  --chart-axis: #A2A9BC;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.6);
  --overlay: rgb(0 0 0 / 0.6);
}