/**
 * Tema global Botino — light pastel frío (azul/verde).
 *
 * CSS custom properties heredan a través del shadow DOM, así que cualquier
 * componente puede usar `var(--bg)` sin re-declarar nada.
 */

/* ────────────────────────────────────────────────────────────
 * Tipografía: Inter + JetBrains Mono (variable, self-hosted)
 * ──────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Inter";
  src: url("/styles/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/styles/fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ────────────────────────────────────────────────────────────
 * Tokens de diseño
 * ──────────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:           #f7fafc;   /* casi blanco con tinte azul muy sutil */
  --panel:        #ffffff;   /* tarjetas / paneles principales */
  --panel-2:      #f1f5f9;   /* slate-100 */
  --panel-3:      #e2e8f0;   /* slate-200 */

  /* Borders */
  --border:       #e2e8f0;   /* slate-200 */
  --border-hi:    #cbd5e1;   /* slate-300 */
  --border-active:#0ea5e9;   /* sky-500 */

  /* Text */
  --text:         #0f172a;   /* slate-900 */
  --text-dim:     #475569;   /* slate-600 */
  --text-muted:   #64748b;   /* slate-500 */
  --text-on-acc:  #ffffff;
  --muted:        var(--text-muted);

  /* Accents — azul/verde fríos como protagonistas */
  --accent:       #0ea5e9;   /* sky-500 */
  --accent-hover: #0284c7;   /* sky-600 */
  --accent-soft:  #e0f2fe;   /* sky-100 */
  --ok:           #10b981;   /* emerald-500 */
  --ok-soft:      #d1fae5;   /* emerald-100 */
  --warn:         #f59e0b;   /* amber-500 */
  --warn-soft:    #fef3c7;
  --err:          #ef4444;   /* red-500 */
  --err-soft:     #fee2e2;

  /* Bubbles — light pastel */
  --user-bubble:  #d1fae5;   /* emerald-100 (cliente) */
  --user-border:  #6ee7b7;   /* emerald-300 */
  --user-text:    #064e3b;   /* emerald-900 */
  --user-name:    #047857;   /* emerald-700 */
  --user-meta:    #059669;   /* emerald-600 */

  --bot-bubble:   #dbeafe;   /* blue-100 (bot) */
  --bot-border:   #93c5fd;   /* blue-300 */
  --bot-text:     #1e3a8a;   /* blue-900 */
  --bot-name:     #1d4ed8;   /* blue-700 */
  --bot-meta:     #2563eb;   /* blue-600 */

  --err-bubble:   #fee2e2;
  --err-border:   #fca5a5;
  --err-text:     #7f1d1d;
  --err-name:     #b91c1c;
  --err-meta:     #dc2626;

  /* Charts — paleta pastel coordinada (~400 saturación) */
  --chart-blue:   #38bdf8;   /* sky-400 */
  --chart-green:  #34d399;   /* emerald-400 */
  --chart-purple: #a78bfa;   /* violet-400 */
  --chart-orange: #fb923c;   /* orange-400 */
  --chart-pink:   #f472b6;   /* pink-400 */
  --chart-gray:   #94a3b8;   /* slate-400 */
  --chart-blue-soft:  rgba(56, 189, 248, 0.20);
  --chart-green-soft: rgba(52, 211, 153, 0.20);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radii */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Shadows */
  --shadow-sm:     0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:     0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg:     0 12px 28px rgba(15, 23, 42, 0.10);
  --shadow-bubble: 0 1px 2px rgba(15, 23, 42, 0.04);

  /* Type scale */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Fira Mono", monospace;
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   18px;
  --fs-xl:   24px;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --lh-base:  1.5;
  --lh-tight: 1.3;

  /* Focus ring (accesibilidad) */
  --focus-ring: 0 0 0 3px var(--accent-soft);
}

/* ────────────────────────────────────────────────────────────
 * Reset / defaults
 * ──────────────────────────────────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--text);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }

/* Scrollbars finos / pastel */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-hi) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
*::-webkit-scrollbar-track { background: transparent; }

/* Selection con tinte pastel */
::selection { background: var(--accent-soft); color: var(--text); }