/* ═══════════════════════════════════════════════════════════════
   tokens.css — Design tokens globales
   Paleta: dark neutral, estilo Claude / Open WebUI
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Fondo */
  --bg:       #0d0d0d;
  --surface:  #111111;
  --surface2: #1a1a1a;
  --surface3: #222222;
  --border:   #2a2a2a;
  --border2:  #333333;

  /* Grid overlay */
  --grid-line: rgba(255,255,255,0.04);

  /* Acento neutro */
  --accent:   #ffffff;
  --accent2:  #888888;

  /* Texto */
  --text:     #ebebeb;
  --text2:    #888888;
  --text3:    #444444;

  /* Semánticos */
  --green:    #3fb950;
  --red:      #f85149;
  --yellow:   #d29922;
  --blue:     #58a6ff;

  /* Toggle */
  --toggle-on:  #3fb950;
  --toggle-off: #333333;

  /* Forma */
  --radius:    6px;
  --radius-sm: 4px;
  --radius-xs: 3px;

  /* Tipografía */
  --font-ui:   'Inter', 'SF Pro Display', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  /* Z-index layers */
  --z-base:      1;
  --z-window:    100;
  --z-toolbar:   900;
  --z-topbar:    950;
  --z-statusbar: 950;
  --z-modal:     1000;
}

/* ── Tema claro ──────────────────────────────────────────────── */
[data-theme="light"],
html[data-theme="light"] body {
  background-color: #f5f5f5;
  color: #111111;
}
[data-theme="light"] {
  --bg:         #f5f5f5;
  --surface:    #ffffff;
  --surface2:   #f0f0f0;
  --surface3:   #e8e8e8;
  --border:     #e0e0e0;
  --border2:    #d0d0d0;
  --grid-line:  rgba(0,0,0,0.06);
  --accent:     #000000;
  --accent2:    #666666;
  --text:       #111111;
  --text2:      #555555;
  --text3:      #aaaaaa;
  --toggle-off: #cccccc;
  --toggle-on:  #38bdf8;
}

/* Reset mínimo */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  min-height: 100vh;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.2s, color 0.2s;
}
/* Asegurar que las variables del tema se aplican al elemento html */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

/* ════════════════════════════════════════════════════════════════
   PALETAS DE COLOR — seleccionables por usuario
   Aplican sobre el tema oscuro/claro base.
   ════════════════════════════════════════════════════════════════ */

/* Midnight — negro puro (default, actual) */
[data-palette="midnight"] {
  --bg:       #0d0d0d;
  --surface:  #111111;
  --surface2: #1a1a1a;
  --surface3: #222222;
  --border:   #2a2a2a;
  --border2:  #333333;
}

/* Slate — gris azulado oscuro (Open WebUI) */
[data-palette="slate"] {
  --bg:       #0f1117;
  --surface:  #161b22;
  --surface2: #1c2128;
  --surface3: #22272e;
  --border:   #30363d;
  --border2:  #3d444d;
}

/* Zinc — gris cálido oscuro (Linear / Vercel) */
[data-palette="zinc"] {
  --bg:       #0e0e0e;
  --surface:  #141414;
  --surface2: #1c1c1c;
  --surface3: #242424;
  --border:   #2e2e2e;
  --border2:  #3a3a3a;
}

/* Stone — marrón oscuro cálido */
[data-palette="stone"] {
  --bg:       #0c0b0a;
  --surface:  #141210;
  --surface2: #1c1916;
  --surface3: #24201c;
  --border:   #302c28;
  --border2:  #3c3834;
}