/* ==========================================================================
   tokens.css — F0.7: Infraestructura Light/Dark + tokens de diseño
   ==========================================================================

   Capa de tokens ADITIVA. No reemplaza ningún CSS existente; los ~36 CSS
   actuales del proyecto siguen funcionando sin cambios y pueden seguir
   usando sus valores hardcodeados hasta que se migren módulo a módulo
   (F2+). Este archivo solo define el vocabulario de variables CSS y el
   mecanismo Light/Dark que esa migración futura consumirá.

   Contrato de origen (no reinventar valores fuera de estos documentos):
     - docs/frontend/design-tokens-audit.md   (F0.1 — auditoría)
     - docs/frontend/design-color-system.md   (F0.2 — color)
     - docs/frontend/design-typography.md     (F0.3 — tipografía)
     - docs/frontend/design-layout.md         (F0.4 — spacing/grid)
     - docs/frontend/design-geometry.md       (F0.5 — bordes/radios/sombras)
     - docs/frontend/design-states.md         (F0.6 — estados/motion)

   Mecanismo de tema:
     - Atributo `data-theme="light"` / `data-theme="dark"` en <html>.
     - `_Layout.cshtml` fija ese atributo de forma síncrona (ver script
       inline antes de cualquier CSS) leyendo localStorage y, si no hay
       preferencia guardada, `prefers-color-scheme` — evita flash de tema.
     - El bloque `@media (prefers-color-scheme: dark)` de abajo es una red
       de seguridad solo-CSS (JS deshabilitado / render antes de tiempo);
       en operación normal el atributo `data-theme` ya viene resuelto.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS GLOBALES (independientes de tema)
   -------------------------------------------------------------------------- */
:root {
  /* --- Tipografía (F0.3) --- */
  --font-family-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;

  --font-size-display: 1.75rem;   /* 28px */
  --font-size-h1: 1.5rem;         /* 24px */
  --font-size-h2: 1.25rem;        /* 20px */
  --font-size-h3: 1rem;           /* 16px */
  --font-size-h4: 0.875rem;       /* 14px */
  --font-size-body: 0.875rem;     /* 14px — tamaño base real de la UI */
  --font-size-body-small: 0.8125rem; /* 13px */
  --font-size-label: 0.75rem;     /* 12px */
  --font-size-caption: 0.6875rem; /* 11px */
  --font-size-data: 0.8125rem;    /* 13px — celdas de tabla, columnas numéricas */

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

  --line-height-display: 1.2;
  --line-height-h1: 1.25;
  --line-height-h2: 1.3;
  --line-height-h3: 1.4;
  --line-height-h4: 1.4;
  --line-height-body: 1.5;
  --line-height-body-small: 1.45;
  --line-height-label: 1.3;
  --line-height-caption: 1.4;
  --line-height-data: 1.4;

  --letter-spacing-display: -0.01em;
  --letter-spacing-h1: -0.005em;
  --letter-spacing-label: 0.02em;
  --letter-spacing-caption: 0.01em;

  /* --- Spacing (F0.4) — escala base 4px --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Radius (F0.5) --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* --- Motion (F0.6) --- */
  --motion-duration-fast: 120ms;
  --motion-duration-normal: 200ms;
  --motion-duration-slow: 320ms;
  --motion-duration-spinner: 800ms;
  --motion-duration-shimmer: 1.5s;

  --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-easing-entrance: cubic-bezier(0, 0, 0.2, 1);
  --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);

  /* --- Focus ring (F0.6 §C.3) — mecanismo único, color por tema --- */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
}

/* prefers-reduced-motion (F0.6 §I) — colapsa duraciones de transición de
   estado; spinner/skeleton se tratan aparte en cada componente cuando se
   implementen (F2+), aquí solo se ofrece el token ya reducido. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 1ms;
    --motion-duration-normal: 1ms;
    --motion-duration-slow: 1ms;
  }
}

/* --------------------------------------------------------------------------
   2. LIGHT THEME (default — también el look actual del frontend existente)
   -------------------------------------------------------------------------- */
:root,
html[data-theme="light"] {
  --color-bg: #F5F6F8;
  --color-surface: #FBFCFD;
  --color-surface-elevated: #FFFFFF;
  --color-sidebar: #161C2D;

  --color-text: #161C2D;
  --color-text-secondary: #4B5468;
  --color-text-muted: #767E90;
  --color-text-inverse: #FFFFFF;

  --color-border: #E2E5EA;
  --color-border-subtle: #ECEEF2;
  --color-border-interactive: #8790A6;
  --color-border-focus: var(--color-primary);

  --color-primary: #0476D0;
  --color-primary-hover: #0464AF;
  --color-primary-active: #035089;
  --color-primary-subtle: #DCEEFB;
  --color-primary-contrast: #FFFFFF;
  /* No existe --color-primary-text en Light: `primary` base ya cumple AA
     como texto/link sobre fondos claros (ver design-color-system.md §G). */

  --color-success: #15803D;
  --color-success-subtle: #E6F6EA;
  --color-success-border: #A9DDBA;
  --color-success-text-on-subtle: #0B7A3B;

  --color-warning: #946200;
  --color-warning-subtle: #FDF1D6;
  --color-warning-border: #F0CE85;
  --color-warning-text-on-subtle: #8A5A00;

  --color-danger: #C4281C;
  --color-danger-subtle: #FBE7E6;
  --color-danger-border: #F0B4AE;
  --color-danger-text-on-subtle: #B3261E;

  --color-info: #0468B4;
  --color-info-subtle: #E3F1FC;
  --color-info-border: #A9D4F2;
  --color-info-text-on-subtle: #075A9E;

  --shadow-none: none;
  --shadow-subtle: 0 1px 2px rgba(22, 28, 45, 0.06);
  --shadow-elevated: 0 4px 12px rgba(22, 28, 45, 0.10), 0 1px 2px rgba(22, 28, 45, 0.06);
  --shadow-modal: 0 12px 32px rgba(22, 28, 45, 0.16);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   3. DARK THEME (explícito vía data-theme="dark")
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
  --color-bg: #0F131E;
  --color-surface: #1A2032;
  --color-surface-elevated: #232B45;
  --color-sidebar: #161C2D;

  --color-text: #E9ECF4;
  --color-text-secondary: #AEB4C7;
  --color-text-muted: #767E96;
  --color-text-inverse: #161C2D;

  --color-border: #2B3350;
  --color-border-subtle: #232A40;
  --color-border-interactive: #6B76A0;
  --color-border-focus: var(--color-primary);

  --color-primary: #0476D0;
  --color-primary-hover: #1D8AE0;
  --color-primary-active: #3D9CE8;
  --color-primary-subtle: #132A45;
  --color-primary-contrast: #FFFFFF;
  --color-primary-text: #4DA3E0; /* variante clara exclusiva de Dark para texto/links (ver §G) */

  --color-success: #4ADE80;
  --color-success-subtle: #132A1D;
  --color-success-border: #245C39;
  --color-success-text-on-subtle: #4ADE80;

  --color-warning: #F5B84C;
  --color-warning-subtle: #2E2210;
  --color-warning-border: #5C4519;
  --color-warning-text-on-subtle: #F5B84C;

  --color-danger: #F87171;
  --color-danger-subtle: #2E1717;
  --color-danger-border: #5C2B2B;
  --color-danger-text-on-subtle: #F87171;

  --color-info: #4DA3E0;
  --color-info-subtle: #132335;
  --color-info-border: #264A6B;
  --color-info-text-on-subtle: #4DA3E0;

  --shadow-none: none;
  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.32);
  --shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.40);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   4. PREFERENCIA DE SISTEMA (red de seguridad solo-CSS)
   -------------------------------------------------------------------------- */
/* Si por algún motivo el atributo data-theme no llegó a fijarse (JS
   deshabilitado, primer paint antes del script inline), se respeta
   prefers-color-scheme automáticamente. En operación normal el script
   inline de _Layout.cshtml ya deja data-theme="dark"/"light" explícito
   antes del primer render, así que este bloque rara vez aplica. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --color-bg: #0F131E;
    --color-surface: #1A2032;
    --color-surface-elevated: #232B45;
    --color-sidebar: #161C2D;

    --color-text: #E9ECF4;
    --color-text-secondary: #AEB4C7;
    --color-text-muted: #767E96;
    --color-text-inverse: #161C2D;

    --color-border: #2B3350;
    --color-border-subtle: #232A40;
    --color-border-interactive: #6B76A0;
    --color-border-focus: var(--color-primary);

    --color-primary: #0476D0;
    --color-primary-hover: #1D8AE0;
    --color-primary-active: #3D9CE8;
    --color-primary-subtle: #132A45;
    --color-primary-contrast: #FFFFFF;
    --color-primary-text: #4DA3E0;

    --color-success: #4ADE80;
    --color-success-subtle: #132A1D;
    --color-success-border: #245C39;
    --color-success-text-on-subtle: #4ADE80;

    --color-warning: #F5B84C;
    --color-warning-subtle: #2E2210;
    --color-warning-border: #5C4519;
    --color-warning-text-on-subtle: #F5B84C;

    --color-danger: #F87171;
    --color-danger-subtle: #2E1717;
    --color-danger-border: #5C2B2B;
    --color-danger-text-on-subtle: #F87171;

    --color-info: #4DA3E0;
    --color-info-subtle: #132335;
    --color-info-border: #264A6B;
    --color-info-text-on-subtle: #4DA3E0;

    --shadow-none: none;
    --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.32);
    --shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.40);

    color-scheme: dark;
  }
}

/* ==========================================================================
   5. TOGGLE DE TEMA — control mínimo integrado en el sidebar existente
   ==========================================================================
   Se apoya en la clase `.sidebar-item` ya definida en navbar.css (círculo
   45px, expansión con label en hover) para no introducir un componente
   visual nuevo — solo el comportamiento de mostrar/ocultar el ícono según
   el tema activo y un anillo de foco accesible. El sidebar sigue siendo
   `--color-sidebar` (#161C2D) hardcodeado en navbar.css en ambos temas
   (identidad de marca, ver design-color-system.md §B/§D) por eso el
   control usa un color de foco fijo legible sobre fondo oscuro en vez de
   var(--color-border-focus), que está pensado para superficies claras.
   ========================================================================== */
.theme-toggle-item {
  border: none;
  padding: 0;
  font: inherit;
}

.theme-toggle-item .theme-toggle-icon-light {
  display: none;
}

html[data-theme="dark"] .theme-toggle-item .theme-toggle-icon-dark {
  display: none;
}

html[data-theme="dark"] .theme-toggle-item .theme-toggle-icon-light {
  display: block;
}

.theme-toggle-item:focus-visible {
  outline: var(--focus-ring-width) solid #4DA3E0;
  outline-offset: var(--focus-ring-offset);
}