/* ============================================================
   INDIGO KB — Design System Tokens
   Fuente de verdad para colores, tipografía, radios, sombras.
   ============================================================ */

@import url('/static/vendor/google-ds.css');

:root {
  --font-ui:   "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Neutrals (cool off-white — light mode default) */
  --bg:            oklch(0.984 0.002 255);
  --surface:       #ffffff;
  --surface-2:     oklch(0.978 0.003 255);
  --surface-3:     oklch(0.965 0.004 255);
  --border:        oklch(0.922 0.004 255);
  --border-strong: oklch(0.88 0.006 255);
  --text:          oklch(0.24 0.012 262);
  --text-2:        oklch(0.52 0.012 262);
  --text-3:        oklch(0.66 0.01 262);

  /* Acento primario (azul HP) */
  --primary:        oklch(0.55 0.18 256);
  --primary-hover:  oklch(0.5 0.18 256);
  --primary-fg:     #ffffff;
  --primary-soft:   oklch(0.96 0.035 256);
  --primary-softer: oklch(0.98 0.018 256);
  --primary-border: oklch(0.9 0.05 256);

  /* Estados */
  --green:       oklch(0.62 0.15 152);
  --green-soft:  oklch(0.95 0.045 152);
  --amber:       oklch(0.72 0.15 70);
  --amber-soft:  oklch(0.96 0.05 80);
  --red:         oklch(0.6 0.2 25);
  --red-soft:    oklch(0.96 0.04 25);
  --indigo:      oklch(0.55 0.19 285);
  --indigo-soft: oklch(0.96 0.04 285);
  --teal:        oklch(0.6 0.1 195);

  /* Radios */
  --radius-lg: 16px;
  --radius:    11px;
  --radius-sm: 8px;
  --radius-xl: 16px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.05);
  --shadow-md: 0 2px 4px -1px rgba(17,24,39,.05), 0 8px 20px -6px rgba(17,24,39,.1);
  --shadow-lg: 0 8px 16px -6px rgba(17,24,39,.08), 0 20px 40px -12px rgba(17,24,39,.16);
  --shadow-blue: 0 0 0 3px oklch(0.55 0.18 256 / 0.18);

  /* ── Escala tipográfica (rem, base 16px — relativa al ajuste del navegador) ── */
  --fs-3xl:   2rem;       /* 32px — títulos hero */
  --fs-2xl:   1.5rem;     /* 24px — títulos de sección */
  --fs-xl:    1.25rem;    /* 20px */
  --fs-lg:    1.125rem;   /* 18px */
  --fs-md:    1rem;       /* 16px */
  --fs-base:  0.9375rem;  /* 15px — cuerpo */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-xs:    0.8125rem;  /* 13px */
  --fs-2xs:   0.75rem;    /* 12px */
  --fs-3xs:   0.6875rem;  /* 11px — etiquetas/metadatos */
  --fs-micro: 0.625rem;   /* 10px — piso para texto pequeño (badges, pills) */

  /* Alturas de línea */
  --lh-tight:  1.2;   /* títulos */
  --lh-snug:   1.35;  /* datos densos */
  --lh-normal: 1.5;   /* párrafos */

  /* Shell */
  --sidebar-w:  350px;
  --topbar-h:   60px;
  --btn-h:      36px;
  --transition: 140ms ease;

  /* ── Aliases para compatibilidad con app.css existente ── */
  --hp-blue:       var(--primary);
  --hp-blue-dark:  var(--primary-hover);
  --hp-blue-dim:   var(--primary-soft);
  --hp-blue-glow:  oklch(0.55 0.18 256 / 0.21);
  --surface-1:     var(--surface);
  /* Alias de texto principal. Se usaba en 9 reglas SIN estar definido: al ser
     inválido, el color se heredaba del padre. En la terminal eso significaba
     heredar el gris claro del texto de consola, así que una caja de texto con
     fondo claro quedaba ilegible en tema claro. Como --text sí cambia con el
     tema, el alias arregla las 9 de una vez y en ambos temas. */
  --text-1:        var(--text);
  --text-muted:    var(--text-2);
  --text-dim:      var(--text-3);
  --sans:          var(--font-ui);
  --mono:          var(--font-mono);
  --success:       var(--green);
  --danger:        var(--red);
  --border-bright: var(--border-strong);
  --amber-dim:     var(--amber-soft);
}

/* ── Dark mode — activado con [data-theme="dark"] en <html> ── */
[data-theme="dark"] {
  --bg:            oklch(0.13 0.012 262);
  --surface:       oklch(0.17 0.012 262);
  --surface-2:     oklch(0.20 0.011 262);
  --surface-3:     oklch(0.23 0.010 262);
  --border:        oklch(0.30 0.010 262);
  --border-strong: oklch(0.38 0.010 262);
  --text:          oklch(0.94 0.004 255);
  --text-2:        oklch(0.72 0.008 255);
  --text-3:        oklch(0.53 0.008 255);

  --primary:        oklch(0.64 0.17 256);
  --primary-hover:  oklch(0.70 0.17 256);
  --primary-soft:   oklch(0.22 0.06 256);
  --primary-softer: oklch(0.18 0.04 256);
  --primary-border: oklch(0.36 0.09 256);

  --green-soft:  oklch(0.20 0.06 152);
  --amber-soft:  oklch(0.22 0.06 80);
  --red-soft:    oklch(0.22 0.06 25);
  --indigo-soft: oklch(0.22 0.06 285);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 2px 8px rgba(0,0,0,.35), 0 8px 20px -4px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.4), 0 20px 40px -8px rgba(0,0,0,.6);
  --shadow-blue: 0 0 0 3px oklch(0.64 0.17 256 / 0.25);
  --hp-blue-glow: oklch(0.64 0.17 256 / 0.25);
  --hp-blue-dim:  oklch(0.22 0.06 256 / 0.18);
  --border-bright: var(--border-strong);
  --amber-dim: var(--amber-soft);
}

/* Base tipográfica */
html { font-size: 100%; }  /* 16px — respeta el ajuste del navegador; base para rem */
body {
  font-family: var(--font-ui);
  font-size: var(--fs-base);   /* 15px relativo — heredado por texto sin tamaño propio */
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds-mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
::selection { background: var(--primary-soft); }

@keyframes ds-screen-in {
  from { opacity: .55; transform: translateY(8px); }
  to   { opacity: 1;   transform: none; }
}
.ds-screen-anim { animation: ds-screen-in .32s cubic-bezier(.2,.7,.3,1); }