/*
 * ============================================================
 *  KoniRod — kr-tokens.css
 *  Fuente única de variables de paleta (--kr-*)
 *
 *  Importar en base.html ANTES de kr-components.css:
 *  <link rel="stylesheet" href="{% static 'css/kr-tokens.css' %}">
 *
 *  La paleta activa se controla con una clase en <body>:
 *    body                  → Graphite (default, oscuro)
 *    body.kr-theme-espresso → Espresso (oscuro cálido)
 *    body.kr-theme-slate    → Slate (oscuro azulado)
 *    body.kr-theme-classic  → Nebula Purple (el original)
 *    body.kr-light          → Modo claro (sobre cualquier tema)
 *
 *  Para agregar una paleta nueva: copiar un bloque y cambiar hex.
 *  Nunca hardcodear colores en componentes: usar var(--kr-*).
 *
 *  Contraste: --kr-texto-2 y --kr-texto-3 deben quedar en 4,5:1 o más
 *  contra --kr-base, --kr-sidebar, --kr-surface y --kr-surface-alt de su
 *  paleta (WCAG AA). Ajustado el 2026-10-26: texto-3 en las cuatro
 *  paletas y en modo claro, y texto-2 en Clásica. Al tocar un fondo o un
 *  alfa, volver a medir.
 *  2026-10-27: texto-3 sube otra vez para llegar a 4,7:1 también sobre
 *  esos fondos con un tinte de acento del 4–8 % (thead, filas activas).
 *  En modo claro, --kr-acento y los semánticos (success/warning/danger/
 *  info) se usan como texto sobre su propio tinte (20–32 %, badges y
 *  botones suaves): se oscurecieron para quedar en 4,5:1 o más sobre
 *  ese tinte. --kr-primario sigue siendo el color de marca del botón.
 * ============================================================ */


/* ============================================================
   GRAPHITE — default · oscuro · carbón neutro + púrpura sobrio
   ============================================================ */
:root {
  --kr-base:          #1D2026;
  --kr-sidebar:       #16181D;
  --kr-surface:       #23262E;
  --kr-surface-alt:   #101216;

  --kr-primario:      #6B4FC8;
  --kr-acento:        #A892F0;
  --kr-bastones:      #8B7AD8;

  --kr-texto-1:       rgba(255,255,255,0.92);
  --kr-texto-2:       rgba(210,205,225,0.66);
  --kr-texto-3:       rgba(180,172,210,0.83);

  --kr-borde-1:       rgba(168,146,240,0.10);
  --kr-borde-2:       rgba(168,146,240,0.20);
  --kr-borde-3:       rgba(168,146,240,0.38);

  /* Nav */
  --kr-nav-item:          rgba(255,255,255,0.46);
  --kr-nav-activo:        #ffffff;
  --kr-nav-bg-activo:     #6B4FC8;
  --kr-nav-borde-activo:  #6B4FC8;

  /* Wordmark */
  --kr-wordmark-koni: rgba(255,255,255,0.92);
  --kr-wordmark-rod:  #A892F0;
  --kr-icon-bastones: #8B7AD8;

  /* Semánticos — comunes a todos los temas oscuros */
  --kr-success:  #5DCAA5;
  --kr-warning:  #EF9F27;
  --kr-danger:   #F09595;
  --kr-info:     #85B7EB;

  /* Chat: coloured outgoing bubbles keep readable text in every palette. */
  --kr-chat-bg:   #6B4FC8;
  --kr-chat-text: #ffffff;

  /* Scrollbar */
  --kr-scrollbar-track: rgba(168,146,240,0.04);
  --kr-scrollbar-thumb: rgba(168,146,240,0.18);

  /* Profundidad de cards */
  --kr-card-shadow:    0 1px 2px rgba(0,0,0,0.34), 0 4px 12px rgba(0,0,0,0.20);
  --kr-card-glow:      inset 0 1px 0 rgba(168,146,240,0.09);
  --kr-card-border-t:  rgba(168,146,240,0.16);

  /* Bootstrap overrides */
  --bs-body-color:      rgba(255,255,255,0.92);
  --bs-body-bg:         #101216;
  --bs-card-bg:         #1D2026;
  --bs-card-color:      rgba(255,255,255,0.92);
  --bs-border-color:    rgba(168,146,240,0.10);
  --bs-secondary-color: rgba(210,205,225,0.66);
}


/* ============================================================
   ESPRESSO — oscuro · carbón cálido + acento bronce
   ============================================================ */
body.kr-theme-espresso {
  --kr-chat-bg: #8E6424;
  --kr-base:          #221E19;
  --kr-sidebar:       #1A1714;
  --kr-surface:       #2A251F;
  --kr-surface-alt:   #14110D;

  --kr-primario:      #B07D2E;
  --kr-acento:        #D8A24A;
  --kr-bastones:      #C68F3C;

  --kr-texto-1:       rgba(255,255,255,0.92);
  --kr-texto-2:       rgba(225,210,185,0.66);
  --kr-texto-3:       rgba(200,170,130,0.85);

  --kr-borde-1:       rgba(216,162,74,0.10);
  --kr-borde-2:       rgba(216,162,74,0.20);
  --kr-borde-3:       rgba(216,162,74,0.38);

  --kr-nav-item:          rgba(255,255,255,0.46);
  --kr-nav-activo:        #ffffff;
  --kr-nav-bg-activo:     #B07D2E;
  --kr-nav-borde-activo:  #B07D2E;

  --kr-wordmark-koni: rgba(255,255,255,0.92);
  --kr-wordmark-rod:  #D8A24A;
  --kr-icon-bastones: #C68F3C;

  /* Verde más neutro para no chocar con el bronce del acento */
  --kr-success:  #7FC9A0;
  --kr-warning:  #E8B45A;
  --kr-danger:   #E89086;
  --kr-info:     #8FB4C9;

  --kr-scrollbar-track: rgba(216,162,74,0.04);
  --kr-scrollbar-thumb: rgba(216,162,74,0.18);

  --kr-card-shadow:    0 1px 2px rgba(0,0,0,0.36), 0 4px 12px rgba(0,0,0,0.22);
  --kr-card-glow:      inset 0 1px 0 rgba(216,162,74,0.09);
  --kr-card-border-t:  rgba(216,162,74,0.16);

  --bs-body-color:      rgba(255,255,255,0.92);
  --bs-body-bg:         #14110D;
  --bs-card-bg:         #221E19;
  --bs-card-color:      rgba(255,255,255,0.92);
  --bs-border-color:    rgba(216,162,74,0.10);
  --bs-secondary-color: rgba(225,210,185,0.66);
}


/* ============================================================
   SLATE — oscuro · gris azulado frío + acento teal
   ============================================================ */
body.kr-theme-slate {
  --kr-chat-bg: #087654;
  --kr-base:          #1B232B;
  --kr-sidebar:       #141A1F;
  --kr-surface:       #212B33;
  --kr-surface-alt:   #0E1318;

  --kr-primario:      #1D9E75;
  --kr-acento:        #4FD1B5;
  --kr-bastones:      #3FBBA0;

  --kr-texto-1:       rgba(255,255,255,0.92);
  --kr-texto-2:       rgba(200,215,225,0.66);
  --kr-texto-3:       rgba(150,180,200,0.88);

  --kr-borde-1:       rgba(120,160,180,0.12);
  --kr-borde-2:       rgba(120,160,180,0.22);
  --kr-borde-3:       rgba(120,160,180,0.40);

  --kr-nav-item:          rgba(255,255,255,0.46);
  --kr-nav-activo:        #ffffff;
  --kr-nav-bg-activo:     #1D9E75;
  --kr-nav-borde-activo:  #1D9E75;

  --kr-wordmark-koni: rgba(255,255,255,0.92);
  --kr-wordmark-rod:  #4FD1B5;
  --kr-icon-bastones: #3FBBA0;

  /* Success usa azul para no confundirse con el acento teal */
  --kr-success:  #6FB8E0;
  --kr-warning:  #EF9F27;
  --kr-danger:   #F09595;
  --kr-info:     #85B7EB;

  --kr-scrollbar-track: rgba(120,160,180,0.05);
  --kr-scrollbar-thumb: rgba(120,160,180,0.20);

  --kr-card-shadow:    0 1px 2px rgba(0,0,0,0.34), 0 4px 12px rgba(0,0,0,0.20);
  --kr-card-glow:      inset 0 1px 0 rgba(120,160,180,0.10);
  --kr-card-border-t:  rgba(120,160,180,0.18);

  --bs-body-color:      rgba(255,255,255,0.92);
  --bs-body-bg:         #0E1318;
  --bs-card-bg:         #1B232B;
  --bs-card-color:      rgba(255,255,255,0.92);
  --bs-border-color:    rgba(120,160,180,0.12);
  --bs-secondary-color: rgba(200,215,225,0.66);
}


/* ============================================================
   CLASSIC — Nebula Purple original (azul medianoche + lavanda)
   ============================================================ */
body.kr-theme-classic {
  --kr-chat-bg: #6545BA;
  --kr-base:          #131F33;
  --kr-sidebar:       #0D1628;
  --kr-surface:       #1C2E46;
  --kr-surface-alt:   #080F1A;

  --kr-primario:      #6B4FC8;
  --kr-acento:        #B8A4FF;
  --kr-bastones:      #7F77DD;

  --kr-texto-1:       rgba(255,255,255,0.88);
  --kr-texto-2:       rgba(200,184,255,0.82);
  --kr-texto-3:       rgba(184,164,255,0.89);

  --kr-borde-1:       rgba(184,164,255,0.10);
  --kr-borde-2:       rgba(184,164,255,0.20);
  --kr-borde-3:       rgba(184,164,255,0.38);

  --kr-nav-item:          rgba(255,255,255,0.46);
  --kr-nav-activo:        #ffffff;
  --kr-nav-bg-activo:     #6B4FC8;
  --kr-nav-borde-activo:  #6B4FC8;

  --kr-wordmark-koni: rgba(255,255,255,0.90);
  --kr-wordmark-rod:  #B8A4FF;
  --kr-icon-bastones: #7F77DD;

  --kr-success:  #5DCAA5;
  --kr-warning:  #EF9F27;
  --kr-danger:   #F09595;
  --kr-info:     #85B7EB;

  --kr-scrollbar-track: rgba(184,164,255,0.04);
  --kr-scrollbar-thumb: rgba(184,164,255,0.18);

  --kr-card-shadow:    0 1px 2px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.18);
  --kr-card-glow:      inset 0 1px 0 rgba(184,164,255,0.10);
  --kr-card-border-t:  rgba(184,164,255,0.18);

  --bs-body-color:      rgba(255,255,255,0.88);
  --bs-body-bg:         #080F1A;
  --bs-card-bg:         #131F33;
  --bs-card-color:      rgba(255,255,255,0.88);
  --bs-border-color:    rgba(184,164,255,0.10);
  --bs-secondary-color: rgba(200,184,255,0.82);
}


/* ============================================================
   MODO CLARO — body.kr-light
   Se combina con cualquier tema. Definido al final para ganar
   especificidad sobre los temas oscuros de arriba.
   ============================================================ */
body.kr-light {
  --kr-base:          #FFFFFF;
  --kr-sidebar:       #FFFFFF;
  --kr-surface:       #F7F9FC;
  --kr-surface-alt:   #EEF3F8;

  --kr-texto-1:       #102033;
  --kr-texto-2:       #475569;
  --kr-texto-3:       #586375;

  --kr-borde-1:       rgba(15,32,51,0.08);
  --kr-borde-2:       rgba(15,32,51,0.14);
  --kr-borde-3:       rgba(107,79,200,0.28);

  --kr-nav-item:          #64748B;
  --kr-nav-activo:        #ffffff;

  --kr-wordmark-koni: #102033;

  --kr-scrollbar-track: rgba(15,32,51,0.04);
  --kr-scrollbar-thumb: rgba(15,32,51,0.18);

  --kr-card-shadow:    0 1px 2px rgba(15,32,51,0.05), 0 10px 26px rgba(15,32,51,0.07);
  --kr-card-glow:      inset 0 1px 0 rgba(255,255,255,0.90);
  --kr-card-border-t:  rgba(255,255,255,0.90);

  --bs-body-color:      #102033;
  --bs-body-bg:         #EEF3F8;
  --bs-card-bg:         #FFFFFF;
  --bs-card-color:      #102033;
  --bs-border-color:    rgba(15,32,51,0.10);
  --bs-secondary-color: #64748B;
}

/* En claro, cada tema conserva SU color de acento/primario/nav.
   Solo se neutralizan superficies y textos arriba; el acento
   se hereda del tema activo, salvo el default Graphite: */
body.kr-light {
  --kr-primario:          #6B4FC8;
  --kr-acento:            #553E9E;
  --kr-bastones:          #6B4FC8;
  --kr-nav-bg-activo:     #6B4FC8;
  --kr-nav-borde-activo:  #6B4FC8;
  --kr-wordmark-rod:      #6B4FC8;
  --kr-icon-bastones:     #6B4FC8;
}
body.kr-light.kr-theme-espresso {
  --kr-primario: #B07D2E; --kr-acento: #71501D; --kr-bastones: #B07D2E;
  --kr-nav-bg-activo: #B07D2E; --kr-nav-borde-activo: #B07D2E;
  --kr-wordmark-rod: #B07D2E; --kr-icon-bastones: #B07D2E;
}
body.kr-light.kr-theme-slate {
  --kr-primario: #0F6E56; --kr-acento: #0C5946; --kr-bastones: #0F6E56;
  --kr-nav-bg-activo: #1D9E75; --kr-nav-borde-activo: #1D9E75;
  --kr-wordmark-rod: #0F6E56; --kr-icon-bastones: #0F6E56;
}

/* Superficies derivadas: se calculan también en body para seguir su paleta. */
:root, body {
  --kr-on-primary: #ffffff;
  --kr-on-dark: #ffffff;
  --kr-primary-soft: color-mix(in srgb, var(--kr-acento) 12%, transparent);
  --kr-hover: color-mix(in srgb, var(--kr-acento) 7%, transparent);
  --kr-focus-ring: color-mix(in srgb, var(--kr-acento) 28%, transparent);
  --kr-primary-hover: color-mix(in srgb, var(--kr-primario) 88%, var(--kr-on-primary));
  --kr-success-soft: color-mix(in srgb, var(--kr-success) 12%, transparent);
  --kr-warning-soft: color-mix(in srgb, var(--kr-warning) 12%, transparent);
  --kr-danger-soft: color-mix(in srgb, var(--kr-danger) 12%, transparent);
  --kr-info-soft: color-mix(in srgb, var(--kr-info) 12%, transparent);
  --kr-danger-action: #B42318;
  --kr-overlay: rgba(0, 0, 0, .5);
  --kr-btn-close-filter: invert(1);
}
body.kr-theme-espresso, body.kr-theme-slate {
  --kr-on-primary: #101216;
  --kr-nav-activo: #101216;
}
body.kr-light {
  --kr-success: #0B5A54;
  --kr-warning: #724500;
  --kr-danger: #901C13;
  --kr-info: #1841B3;
  --kr-btn-close-filter: none;
}
body.kr-light.kr-theme-slate { --kr-on-primary: #ffffff; }

/* ============================================================
   ESCALAS — iguales en todas las paletas y modos
   Usar estos pasos en componentes nuevos en vez de px sueltos.
   Mínimo de texto legible: --kr-fs-2xs (10px).
   ============================================================ */
:root {
  --kr-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kr-font-mono: 'DM Mono', ui-monospace, 'Fira Code', monospace;

  --kr-fs-2xs: 10px;
  --kr-fs-xs:  11px;
  --kr-fs-sm:  12px;
  --kr-fs-md:  13px;
  --kr-fs-lg:  15px;
  --kr-fs-xl:  18px;
  --kr-fs-2xl: 24px;

  --kr-radio-sm:   6px;
  --kr-radio-md:   8px;
  --kr-radio-lg:   10px;
  --kr-radio-xl:   14px;
  --kr-radio-pill: 999px;

  --kr-space-1: 4px;
  --kr-space-2: 8px;
  --kr-space-3: 12px;
  --kr-space-4: 16px;
  --kr-space-5: 20px;
  --kr-space-6: 24px;
  --kr-space-8: 32px;
}