/* ==========================================================================
   mástersport · tokens.css — Única fuente de verdad del sistema de diseño
   Tema y acentos SOLO redefinen variables, nunca reglas.
   ========================================================================== */

:root {
  /* ---- Marca (canales RGB para componer alphas) ---- */
  --ms-c-brand: 52, 84, 209;          /* #3454D1 */
  --ms-brand: #3454D1;
  --ms-brand-hover: #2B47B8;
  --ms-brand-active: #23399B;
  --ms-brand-soft: rgba(var(--ms-c-brand), .09);
  --ms-brand-border: rgba(var(--ms-c-brand), .28);
  --ms-on-brand: #FFFFFF;
  --ms-brand-grad-a: #3454D1;
  --ms-brand-grad-b: #7B5CF0;

  /* ---- Fondos ---- */
  --ms-canvas: #F2F4F9;               /* frío, nunca gris cálido */
  --ms-surface: #FFFFFF;
  --ms-surface-2: #F7F9FC;            /* hovers, cabeceras de tabla */
  --ms-surface-3: #EEF1F7;            /* chips, activos */
  --ms-surface-4: #E4E8F0;            /* barras inactivas */
  --ms-overlay: rgba(9, 16, 32, .48);

  /* ---- Bordes ---- */
  --ms-border: #E4E8F0;
  --ms-border-soft: #EEF1F6;
  --ms-border-strong: #D3DAE8;

  /* ---- Texto (4 escalones) ---- */
  --ms-text-1: #16233A;
  --ms-text-2: #56617A;
  --ms-text-3: #626D85;
  --ms-text-4: #7C879C;
  --ms-text-on-brand: #FFFFFF;
  --ms-link: var(--ms-brand);
  --ms-link-hover: var(--ms-brand-hover);

  /* ---- Sémantivos: texto profundo + fondo vivo en alpha ----
     La firma de la paleta: el color de TEXTO es oscuro, el de FONDO
     es el VIVO (brillante) en alpha. */
  --ms-c-success-live: 23, 198, 102;
  --ms-c-warning-live: 244, 162, 26;
  --ms-c-danger-live: 240, 68, 68;
  --ms-c-info-live: 20, 192, 208;
  --ms-c-purple-live: 139, 92, 246;
  --ms-c-neutral-live: 86, 97, 122;

  --ms-success: #0F7D45;
  --ms-warning: #A5650B;
  --ms-danger: #D63B3B;
  --ms-info: #0E7A88;
  --ms-purple: #6B4AE0;
  --ms-neutral: #56617A;

  --ms-success-bg: rgba(var(--ms-c-success-live), .11);
  --ms-warning-bg: rgba(var(--ms-c-warning-live), .11);
  --ms-danger-bg: rgba(var(--ms-c-danger-live), .11);
  --ms-info-bg: rgba(var(--ms-c-info-live), .11);
  --ms-purple-bg: rgba(var(--ms-c-purple-live), .11);
  --ms-neutral-bg: rgba(var(--ms-c-neutral-live), .11);

  --ms-success-border: rgba(var(--ms-c-success-live), .40);
  --ms-warning-border: rgba(var(--ms-c-warning-live), .40);
  --ms-danger-border: rgba(var(--ms-c-danger-live), .40);
  --ms-info-border: rgba(var(--ms-c-info-live), .40);
  --ms-purple-border: rgba(var(--ms-c-purple-live), .40);

  /* ---- Sombras (suaves, difusas, azul-negro) ---- */
  --ms-shadow-xs: 0 1px 2px rgba(16, 25, 45, .05);
  --ms-shadow-sm: 0 1px 3px rgba(16, 25, 45, .07), 0 1px 2px rgba(16, 25, 45, .05);
  --ms-shadow-md: 0 4px 8px -2px rgba(16, 25, 45, .08), 0 2px 4px rgba(16, 25, 45, .05);
  --ms-shadow-lg: 0 12px 24px -4px rgba(16, 25, 45, .12), 0 4px 8px rgba(16, 25, 45, .07);
  --ms-shadow-xl: 0 24px 48px -8px rgba(16, 25, 45, .20), 0 8px 16px rgba(16, 25, 45, .09);
  --ms-ring: 0 0 0 3px rgba(var(--ms-c-brand), .16);

  /* ---- Radios (no usar cápsula en controles, es app de gestión) ---- */
  --ms-radius-xs: 5px;
  --ms-radius-sm: 8px;
  --ms-radius-md: 10px;
  --ms-radius-lg: 12px;
  --ms-radius-xl: 16px;
  --ms-radius-pill: 999px;

  /* ---- Métricas de esqueleto ---- */
  --ms-sidebar-w: 264px;
  --ms-sidebar-w-mini: 76px;
  --ms-topbar-h: 64px;
  --ms-page-max: 1600px;
  --ms-gutter: 24px;           /* 16px < 992px */
  --ms-gutter-sm: 16px;

  /* ---- Densidad de tabla (conmutable) ---- */
  --ms-table-row-h: 48px;
  --ms-table-pad: 16px;
  --ms-table-row-h-c: 38px;    /* compact */
  --ms-table-pad-c: 11px;

  /* ---- Tipografía ---- */
  --ms-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ms-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --ms-fs-xs: 11px;
  --ms-fs-sm: 12.5px;
  --ms-fs-md: 13.5px;
  --ms-fs-base: 14px;
  --ms-fs-lg: 16px;
  --ms-fs-xl: 22px;
  --ms-fs-2xl: 29px;

  /* ---- Movimiento ---- */
  --ms-ease: cubic-bezier(.4, 0, .2, 1);
  --ms-dur: 0.18s;
  --ms-dur-slow: 0.22s;

  /* ---- Capas ---- */
  --ms-z-sticky: 100;
  --ms-z-menu: 200;
  --ms-z-topbar: 300;
  --ms-z-overlay: 400;
  --ms-z-modal: 500;
  --ms-z-toast: 600;

  /* ---- Componentes propios ---- */
  --ms-kbd-bg: #EEF1F7;
  --ms-kbd-border: #D3DAE8;
  --ms-scrollbar: #CBD3E2;

  /* ---- Avatar gradients ---- */
  --ms-avatar-def-a: rgba(52, 84, 209, 1);
  --ms-avatar-def-b: rgba(123, 92, 240, 1);
}

/* ==========================================================================
   TEMA OSCURO — solo variables
   ========================================================================== */
html[data-ms-theme="dark"] {
  --ms-c-brand: 84, 115, 238;         /* #5473EE */
  --ms-brand: #5473EE;
  --ms-brand-hover: #6684F0;
  --ms-brand-active: #3C5BD0;
  --ms-brand-soft: rgba(var(--ms-c-brand), .14);
  --ms-brand-border: rgba(var(--ms-c-brand), .40);
  --ms-brand-grad-a: #4B6AE3;
  --ms-brand-grad-b: #8A6CF0;

  --ms-canvas: #0B1220;
  --ms-surface: #121C2F;
  --ms-surface-2: #16223A;
  --ms-surface-3: #1A2842;
  --ms-surface-4: #223049;
  --ms-overlay: rgba(4, 8, 16, .62);

  --ms-border: #223049;
  --ms-border-soft: #1B2940;
  --ms-border-strong: #2E3F5C;

  --ms-text-1: #EEF2F8;
  --ms-text-2: #A7B2C8;
  --ms-text-3: #8F9BB3;
  --ms-text-4: #6E7B95;

  --ms-success: #31C97D;
  --ms-warning: #F5B032;
  --ms-danger: #F06468;
  --ms-info: #3AD3E0;
  --ms-purple: #A78BFA;
  --ms-neutral: #A7B2C8;

  --ms-success-bg: rgba(var(--ms-c-success-live), .14);
  --ms-warning-bg: rgba(var(--ms-c-warning-live), .14);
  --ms-danger-bg: rgba(var(--ms-c-danger-live), .14);
  --ms-info-bg: rgba(var(--ms-c-info-live), .14);
  --ms-purple-bg: rgba(var(--ms-c-purple-live), .14);
  --ms-neutral-bg: rgba(var(--ms-c-neutral-live), .14);

  --ms-success-border: rgba(var(--ms-c-success-live), .48);
  --ms-warning-border: rgba(var(--ms-c-warning-live), .48);
  --ms-danger-border: rgba(var(--ms-c-danger-live), .48);
  --ms-info-border: rgba(var(--ms-c-info-live), .48);
  --ms-purple-border: rgba(var(--ms-c-purple-live), .48);

  --ms-kbd-bg: #1A2842;
  --ms-kbd-border: #2E3F5C;
  --ms-scrollbar: #2E3F5C;
}

/* ==========================================================================
   ACENTOS (claro) — solo variables
   ========================================================================== */

/* conersys rojo */
html[data-ms-accent="conersys"] {
  --ms-c-brand: 224, 49, 49;          /* #E03131 */
  --ms-brand: #E03131;
  --ms-brand-hover: #C42626;
  --ms-brand-active: #A31D1D;
  --ms-brand-grad-a: #E03131;
  --ms-brand-grad-b: #F0625C;
}

/* ocean */
html[data-ms-accent="ocean"] {
  --ms-c-brand: 14, 122, 140;         /* #0E7A8C */
  --ms-brand: #0E7A8C;
  --ms-brand-hover: #0B6776;
  --ms-brand-active: #095662;
  --ms-brand-grad-a: #0E7A8C;
  --ms-brand-grad-b: #14B8C4;
}

/* violet */
html[data-ms-accent="violet"] {
  --ms-c-brand: 124, 92, 240;         /* #7C5CF0 */
  --ms-brand: #7C5CF0;
  --ms-brand-hover: #6846E6;
  --ms-brand-active: #5935D5;
  --ms-brand-grad-a: #7C5CF0;
  --ms-brand-grad-b: #A78BFA;
}

/* ==========================================================================
   ACENTOS OSCUROS — solo variables
   ========================================================================== */
html[data-ms-theme="dark"][data-ms-accent="conersys"] {
  --ms-c-brand: 240, 96, 92;
  --ms-brand: #F0605C;
  --ms-brand-hover: #F27975;
  --ms-brand-active: #D44E4A;
  --ms-brand-grad-a: #EC4E48;
  --ms-brand-grad-b: #F79C98;
}

html[data-ms-theme="dark"][data-ms-accent="ocean"] {
  --ms-c-brand: 46, 191, 214;
  --ms-brand: #2EBFD6;
  --ms-brand-hover: #4AC7DB;
  --ms-brand-active: #23A9BF;
  --ms-brand-grad-a: #26B6CC;
  --ms-brand-grad-b: #7EE0EC;
}

html[data-ms-theme="dark"][data-ms-accent="violet"] {
  --ms-c-brand: 154, 128, 252;
  --ms-brand: #9A80FC;
  --ms-brand-hover: #AE98FD;
  --ms-brand-active: #8768FA;
  --ms-brand-grad-a: #8E67FA;
  --ms-brand-grad-b: #C4B0FE;
}

/* ==========================================================================
   DENSIDAD COMPACTA — solo variables
   ========================================================================== */
html[data-ms-density="compact"] {
  --ms-table-row-h: var(--ms-table-row-h-c);
  --ms-table-pad: var(--ms-table-pad-c);
}