/* Color Palette */
:root {
  /* Primarios */
  --primary-color: #02c6b3; /* Teal */
  --primary-color-light: #4dd9cc;
  --primary-color-dark: #018070; /* Texto sobre fondo claro → 4.86:1 */
  --primary-color-transparent: #02c6b312;
  --primary-color-hover: #02c6b31f;

  /* Acentos */
  --accent-color: #335771; /* Azul marino corporativo */
  --accent-color-light: #5a7d96;
  --accent-color-dark: #1e3a4f;

  /* Estados */
  --secondary-color: #335771;
  --success-color: #1a875c; /* Verde éxito coherente con la paleta */
  --success-color-bg: #e7f5ef;
  --warning-color: #f2a93c;
  --warning-color-bg: #fef6e7;
  --danger-color: #d64545;
  --danger-color-bg: #fcebea;
  --info-color: #3ab6e0;
  --info-color-bg: #e8f6fb;

  /* Rellenos sólidos (para texto claro encima: botones, badges) —
     deliberadamente NO se redefinen en .dark{}. Un mismo token no puede
     cumplir los dos roles en dark: aclarar --accent-color/--danger-color
     para que funcionen como TEXTO (revisión 2026-08-20) bajaba su
     contraste como FONDO detrás de texto blanco (.btn-gradient,
     .btn-danger). Guardan el valor de modo claro (ya pensado para
     contrastar con blanco). */
  --accent-color-fill: #335771;
  --danger-color-fill: #d64545;
  --success-color-fill: #1a875c; /* preexistente: .btn-success ya fallaba en dark antes de esta revisión */
  --info-color-fill: #3ab6e0; /* preexistente: .btn-info ya fallaba en dark antes de esta revisión */
  --secondary-color-fill: #335771; /* preexistente: .active-status/.other-status .other .full ya fallaba en dark */
  --warning-color-fill: #f2a93c; /* preexistente: .other-status .inactive .full ya fallaba en dark */

  /* Neutrales */
  --light-color: #fafbfc;
  --dark-color: #1a2c32;

  --text-color: #1e2e36;
  --text-color-secondary: #4e5b66;
  --text-color-tertiary: #7a8791;
  --text-color-on-primary: #ffffff;

  --background-color: #f7f9fa;
  --surface-color: #ffffff;
  --surface-color-variant: #eff2f4;
  --border-color: #d7dfe3;

  /* Componentes específicos - modo claro */
  --app-bg: var(--background-color);
  --header-bg: var(--surface-color);
  --footer-bg: var(--surface-color);
  --card-bg: var(--surface-color);
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --sidebar-bg: var(--surface-color-variant);
  --sidebar-border: var(--border-color);

  --text-heading: var(--text-color);
  --text-paragraph: var(--text-color-secondary);
  --text-caption: var(--text-color-tertiary);
  --text-link: var(--primary-color-dark);
  --text-link-hover: var(--primary-color);

  --input-bg: var(--surface-color);
  --input-border: var(--border-color);
  --input-focus: var(--primary-color-light);
  --input-border-radius: var(--radius-sm);
  --input-height: 40px;
  --input-font-size: 14px;

  --divider-color: var(--border-color);

  /* Sombras */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Radios */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Sidebar */
  --sidebar-width: 248px;
  --sidebar-collapsed-width: 64px;

  /* Transiciones */
  --transition: all 0.3s ease;
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index */
  --z-sidebar: 100;
  --z-navbar: 200;
  --z-modal: 1050;
  --z-toast: 1100;

  /* Tipografía */
  --font-family:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;

  /* ── Escala tipográfica (base 16px → 1rem) ─────────────── */
  --text-2xs: 0.625rem; /* 10px */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.8125rem; /* 13px */
  --text-base: 0.875rem; /* 14px */
  --text-lg: 0.9375rem; /* 15px */
  --text-xl: 1rem; /* 16px */
  --text-2xl: 1.125rem; /* 18px */
  --text-3xl: 1.375rem; /* 22px */
  --text-4xl: 1.75rem; /* 28px */
  --text-5xl: 2.25rem; /* 36px */
  --text-6xl: 6rem; /* 96px */

  --color-scheme: light;
}

.dark {
  /* Variantes de primario/acento para dark mode */
  --primary-color-light: #66e0d3;
  --primary-color-dark: #019e8f;
  --primary-color-transparent: #02c6b315;
  --primary-color-hover: #02c6b325;

  --accent-color: #8197a8; /* WCAG AA: #335771 daba 2.16:1 sobre surface, <4.5 */
  --accent-color-light: #7b9ab0; /* Texto sobre fondo oscuro → 5.59:1 */
  --accent-color-dark: #4a6e88;

  /* Estados */
  --secondary-color: #88a4b5;
  --success-color: #2bd892;
  --success-color-bg: #0f2e24;
  --warning-color: #f2b650;
  --warning-color-bg: #332608;
  --danger-color: #e56e6c; /* WCAG AA: #e05c5c daba 4.10:1 sobre surface-variant, <4.5 */
  --danger-color-bg: #3a1414;
  --info-color: #4cc7f0;
  --info-color-bg: #0c2733;

  /* Neutrales */
  --light-color: #fafbfc;
  --dark-color: #1a2c32;

  --text-color: #e6ebed;
  --text-color-secondary: #a9b6bd;
  --text-color-tertiary: #8b979c; /* WCAG AA: #7f8c92 daba 4.25:1 sobre surface-variant, <4.5 */
  --text-color-on-primary: #ffffff;

  --background-color: #161414;
  --surface-color: #162025;
  --surface-color-variant: #1e2a2f;
  --border-color: #2a3a40;

  /* Componentes específicos - modo oscuro */
  --app-bg: var(--background-color);
  --header-bg: var(--surface-color);
  --footer-bg: var(--surface-color);
  --card-bg: var(--surface-color);
  --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); /* Sombras más intensas */
  --sidebar-bg: var(--surface-color-variant);

  --text-heading: var(--text-color);
  --text-paragraph: var(--text-color-secondary);
  --text-caption: var(--text-color-tertiary);
  --text-link: var(--primary-color);
  --text-link-hover: var(--primary-color-light);

  /* Botones — teal con texto oscuro */
  --button-primary-bg: var(--primary-color);
  --button-primary-text: var(--dark-color);
  --button-primary-hover: var(--primary-color-dark);

  --button-secondary-bg: var(--secondary-color);
  --button-secondary-text: var(--text-color-on-primary);
  --button-secondary-hover: var(--secondary-color-dark);

  /* Inputs (fondo oscuro) */
  --input-bg: var(--surface-color-variant);
  --input-border: var(--border-color);
  --input-focus: var(--primary-color-light);

  --divider-color: var(--border-color);

  /* Sombras (más intensas) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  --shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.45), 0 10px 10px -5px rgba(0, 0, 0, 0.25);

  --color-scheme: dark;
}