/* =============================================================
   tokens.css — Sistema de diseño de Atlas
   Estructura de Pay v5 con paleta propia: neutros con un punto de
   índigo; el índigo profundo solo para acciones, estado activo y marca.
   Tres variantes con los mismos tokens: claro (por defecto), oscuro
   (data-theme="dark") y automático (sin data-theme, según el sistema).
   Contraste AA medido: texto de marca sobre blanco 9,2:1, relleno de
   marca con texto blanco 9,2:1, texto atenuado sobre --surface-2 5,4:1.
   ============================================================= */

:root {
  /* ---- Marca: índigo profundo ---- */
  --indigo-50: #EEF0FF;
  --indigo-100: #E0E3FF;
  --indigo-200: #C6CBFF;
  --indigo-300: #A9AEFF;
  --indigo-400: #8187F0;
  --indigo-500: #5D5CD8;
  --indigo-600: #4A44C4;
  --indigo-700: #3D35A8;
  --indigo-800: #2E2785;
  --indigo-900: #221D63;
  --indigo-950: #17133F;

  /* ---- Superficies y texto (tema claro) ---- */
  --bg: #F4F5F9;
  --bg-elevated: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #ECEEF5;
  --surface-3: #DFE2EC;
  --surface-hover: #F1F1FC;
  --text: #161A2E;
  --text-secondary: #454B62;
  --text-muted: #5A6078;
  --text-on-primary: #FFFFFF;
  --border: #DFE2EA;
  --border-strong: #C7CBD8;
  /* Borde de campos y pista del interruptor apagado: 3:1 o más frente a --surface, --bg y --surface-2. */
  --control-border: #80869D;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235A6078' stroke-width='2' stroke-linecap='round' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");

  /* ---- Primario ----
     --primary: texto e iconos de marca. --primary-solid: relleno con
     --on-primary encima. --primary-ink: texto sobre --primary-soft. */
  --primary: #3D35A8;
  --primary-hover: #2E2785;
  --primary-soft: #E9EAFF;
  --primary-ink: #2E2785;
  --primary-solid: #3D35A8;
  --on-primary: #FFFFFF;
  --gradient-primary: var(--primary-solid);

  /* ---- Semánticos: tinta para texto, color para iconos y bordes, fondo suave ---- */
  --success: #15803D;
  --success-text: #166534;
  --success-soft: #DDF3E4;
  --warning: #F59E0B;
  --warning-text: #7A4E00;
  --warning-soft: #FFF1D6;
  --danger: #B42E27;
  --danger-text: #B42E27;
  --danger-soft: #FBE7E5;
  --danger-solid: #B42E27;
  --info: #1D4ED8;
  --info-text: #1D4ED8;
  --info-soft: #E2EBFD;

  /* ---- Diferencias (antes / después) ---- */
  --diff-add-bg: #DDF3E4;
  --diff-add-text: #14532D;
  --diff-del-bg: #FBE7E5;
  --diff-del-text: #7F1D1D;

  /* ---- Gráficos (decisiones por día) ---- */
  --chart-accepted: #3D35A8;
  --chart-edited: #A9AEFF;
  --chart-rejected: #B42E27;
  --chart-neutral: #DFE2EC;

  /* ---- Tintes por entidad (avatar de empleado, gráficos): tinta + fondo suave.
     Se eligen por id con components/avatar.js, nunca por posición. ---- */
  --tint-1: #2E2785;  --tint-1-bg: #E9EAFF;
  --tint-2: #075B54;  --tint-2-bg: #DCF0EC;
  --tint-3: #94460B;  --tint-3-bg: #FCEADB;
  --tint-4: #A3164D;  --tint-4-bg: #FBE3EB;
  --tint-5: #1D52C2;  --tint-5-bg: #E2EBFD;
  --tint-6: #0B6479;  --tint-6-bg: #DCEFF4;
  --tint-7: #7A4E00;  --tint-7-bg: #FFF1D6;
  --tint-8: #3F6212;  --tint-8-bg: #E8F2D9;

  /* ---- Sombras ---- */
  --shadow-xs: 0 1px 2px rgba(22, 26, 46, 0.06);
  --shadow-sm: 0 2px 8px rgba(22, 26, 46, 0.07);
  --shadow-md: 0 6px 18px rgba(22, 26, 46, 0.09);
  --shadow-lg: 0 14px 36px rgba(22, 26, 46, 0.14);
  --shadow-primary: 0 8px 20px rgba(61, 53, 168, 0.28);
  --shadow-card: 0 1px 2px rgba(22, 26, 46, 0.04), 0 10px 28px -16px rgba(22, 26, 46, 0.16);
  --scrim: rgba(12, 14, 25, 0.42);
  --glow: rgba(61, 53, 168, 0.14);

  /* ---- Radios ---- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-control: 14px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* ---- Espaciado (escala 4px) ---- */
  --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;

  /* ---- Tipografía ---- */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.625rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra: 800;

  /* ---- Movimiento ---- */
  --transition-fast: 0.15s ease;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.32, 1.2, 0.6, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- Layout ----
     --safe-top/--safe-bottom caen al env() del navegador. Escritorio
     (≥ 900 px): barra lateral; móvil: barra inferior anclada. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --content-max: 1120px;
  --content-narrow: 720px;
  --sidebar-width: 256px;
  --nav-height: 64px;
  --z-nav: 900;
  --z-sheet: 1000;
  --z-toast: 1100;

  color-scheme: light;
}

/* ============ TEMA OSCURO (elegido) ============ */
:root[data-theme="dark"] {
  --bg: #0C0E19;
  --bg-elevated: #141727;
  --surface: #141727;
  --surface-2: #1C2033;
  --surface-3: #262B42;
  --surface-hover: #1B1E36;
  --text: #E7E9F4;
  --text-secondary: #B8BDD2;
  --text-muted: #969CB5;
  --text-on-primary: #17133F;
  --border: #262B42;
  --border-strong: #363C58;
  --control-border: #6A7091;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23969CB5' stroke-width='2' stroke-linecap='round' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");

  --primary: #A9AEFF;
  --primary-hover: #C9CCFF;
  --primary-soft: #24275A;
  --primary-ink: #C9CCFF;
  --primary-solid: #A9AEFF;
  --on-primary: #17133F;

  --success: #6EDB9A;
  --success-text: #6EDB9A;
  --success-soft: #12301F;
  --warning: #F5C46B;
  --warning-text: #F5C46B;
  --warning-soft: #33270F;
  --danger: #FF8A80;
  --danger-text: #FF8A80;
  --danger-soft: #3A1D1B;
  --danger-solid: #B42E27;
  --info: #93B4FF;
  --info-text: #93B4FF;
  --info-soft: #18284A;

  --diff-add-bg: #12301F;
  --diff-add-text: #A7F0C4;
  --diff-del-bg: #3A1D1B;
  --diff-del-text: #FFC2BC;

  --chart-accepted: #A9AEFF;
  --chart-edited: #4A44C4;
  --chart-rejected: #FF8A80;
  --chart-neutral: #262B42;

  --tint-1: #C9CCFF;  --tint-1-bg: #24275A;
  --tint-2: #7FE3D5;  --tint-2-bg: #12302C;
  --tint-3: #F7B27A;  --tint-3-bg: #3A2614;
  --tint-4: #F49CBE;  --tint-4-bg: #3B1828;
  --tint-5: #93B4FF;  --tint-5-bg: #18284A;
  --tint-6: #7DD3E8;  --tint-6-bg: #123139;
  --tint-7: #F5C46B;  --tint-7-bg: #33270F;
  --tint-8: #B5D98A;  --tint-8-bg: #1E2B12;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.6);
  --shadow-primary: 0 8px 20px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 28px -18px rgba(0, 0, 0, 0.7);
  --scrim: rgba(0, 0, 0, 0.55);
  --glow: rgba(169, 174, 255, 0.12);

  color-scheme: dark;
}

/* ============ TEMA AUTOMÁTICO (sin elección: el del sistema) ============ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #0C0E19;
    --bg-elevated: #141727;
    --surface: #141727;
    --surface-2: #1C2033;
    --surface-3: #262B42;
    --surface-hover: #1B1E36;
    --text: #E7E9F4;
    --text-secondary: #B8BDD2;
    --text-muted: #969CB5;
    --text-on-primary: #17133F;
    --border: #262B42;
    --border-strong: #363C58;
    --control-border: #6A7091;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23969CB5' stroke-width='2' stroke-linecap='round' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");

    --primary: #A9AEFF;
    --primary-hover: #C9CCFF;
    --primary-soft: #24275A;
    --primary-ink: #C9CCFF;
    --primary-solid: #A9AEFF;
    --on-primary: #17133F;

    --success: #6EDB9A;
    --success-text: #6EDB9A;
    --success-soft: #12301F;
    --warning: #F5C46B;
    --warning-text: #F5C46B;
    --warning-soft: #33270F;
    --danger: #FF8A80;
    --danger-text: #FF8A80;
    --danger-soft: #3A1D1B;
    --danger-solid: #B42E27;
    --info: #93B4FF;
    --info-text: #93B4FF;
    --info-soft: #18284A;

    --diff-add-bg: #12301F;
    --diff-add-text: #A7F0C4;
    --diff-del-bg: #3A1D1B;
    --diff-del-text: #FFC2BC;

    --chart-accepted: #A9AEFF;
    --chart-edited: #4A44C4;
    --chart-rejected: #FF8A80;
    --chart-neutral: #262B42;

    --tint-1: #C9CCFF;  --tint-1-bg: #24275A;
    --tint-2: #7FE3D5;  --tint-2-bg: #12302C;
    --tint-3: #F7B27A;  --tint-3-bg: #3A2614;
    --tint-4: #F49CBE;  --tint-4-bg: #3B1828;
    --tint-5: #93B4FF;  --tint-5-bg: #18284A;
    --tint-6: #7DD3E8;  --tint-6-bg: #123139;
    --tint-7: #F5C46B;  --tint-7-bg: #33270F;
    --tint-8: #B5D98A;  --tint-8-bg: #1E2B12;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.6);
    --shadow-primary: 0 8px 20px rgba(0, 0, 0, 0.45);
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 28px -18px rgba(0, 0, 0, 0.7);
    --scrim: rgba(0, 0, 0, 0.55);
    --glow: rgba(169, 174, 255, 0.12);

    color-scheme: dark;
  }
}