/* ════════════════════════════════════════════════════════════
   palette-celeste.css — Capa 3: Tema Sky
   SOLO sobreescribe variables de primitives.css.
   Cero selectores propios. Cero hardcoded fuera de aquí.
   ════════════════════════════════════════════════════════════ */

:root {
  /* ── Tipografía ─────────────────────────────────────────── */
  --font-family:              'Segoe UI', system-ui, sans-serif;

  /* ── Colores base ───────────────────────────────────────── */
  --color-bg:                 #f0f9ff;
  --color-surface-soft:       #f8fbff;
  --color-surface-strong:     #075985;
  --color-border:             #bae6fd;
  --color-text-soft:          #0c4a6e;
  --color-text-muted:         #7dd3fc;
  --color-text-strong:        #bae6fd;
  --color-accent:             #0284c7;
  --color-accent-soft:        #e0f2fe;
  --color-hover-soft:         #e0f2fe;
  --color-hover-strong:       #0369a1;

  /* ── Semánticos (respuesta) ─────────────────────────────── */
  --color-danger:             #dc2626;
  --color-danger-soft:        #fef2f2;
  --color-warning:            #d97706;
  --color-warning-soft:       #fffbeb;

  /* ── Forma ──────────────────────────────────────────────── */
  --radius-sm:                4px;
  --radius-base:              8px;
  --radius-md:                12px;
  --radius-lg:                18px;

  /* ── Sombras — sky-tinted ───────────────────────────────── */
  --shadow-sm:                0 1px 3px rgba(2,132,199,.08);
  --shadow-base:              0 2px 8px rgba(2,132,199,.10), 0 0 0 1px rgba(186,230,253,.40);
  --shadow-md:                0 4px 16px rgba(2,132,199,.13), 0 0 0 1px rgba(186,230,253,.40);
  --shadow-lg:                0 8px 32px rgba(2,132,199,.16), 0 0 0 1px rgba(186,230,253,.40);

  /* ── Interacción ────────────────────────────────────────── */
  --focus-ring:               0 0 0 3px rgba(125,211,252,.35);

  /* ── Toolbar ────────────────────────────────────────────── */
  --toolbar-title-size:       15px;
  --toolbar-title-weight:     600;

  /* ── Layout ─────────────────────────────────────────────── */
  --lyt-band-bg:              linear-gradient(135deg, #0c4a6e 0%, #0284c7 100%);
  --lyt-band-color:           #ffffff;
  --lyt-band-border:          none;
  --lyt-band-min-height:      46px;
  --lyt-left-bg:              #075985;
  --lyt-left-color:           #bae6fd;
  --lyt-left-border:          none;
  --lyt-right-bg:             #f0f9ff;
  --lyt-right-color:          #0c4a6e;
  --lyt-resizer-bg:           rgba(255,255,255,.08);
  --lyt-resizer-bg-hover:     #7dd3fc;
  --lyt-scroll-thumb:         rgba(125,211,252,.35);
  --lyt-scroll-track:         transparent;

  /* ── Acento oscuro ──────────────────────────────────────── */
  --color-accent-dark:        #0369a1;

  /* ── Form secciones ─────────────────────────────────────── */
  --form-section-d1-bg:       #0c4a6e;
  --form-section-d2-bg:       #0a3d5c;
  --form-scrollbar-hover:     #7dd3fc;

  /* ── Ghost button hover ─────────────────────────────────── */
  --btn-ghost-hover-border:   transparent;
  --btn-ghost-hover-bg:       rgba(255,255,255,.12);

  /* ── Burbujas ───────────────────────────────────────────── */
  --bubble-radius:            16px;
  --bubble-query-bg:          linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
  --bubble-query-border:      rgba(125,211,252,.55);
  --bubble-query-shadow:      0 2px 10px rgba(2,132,199,.10);
  --bubble-query-color:       #0c4a6e;
  --bubble-response-bg:       #ffffff;
  --bubble-response-border:   rgba(125,211,252,.55);
  --bubble-response-shadow:   0 2px 10px rgba(2,132,199,.10);
  --bubble-response-color:    #0c4a6e;
  --bubble-hover-border:      rgba(125,211,252,.90);
  --bubble-hover-shadow:      0 2px 14px rgba(2,132,199,.18), 0 0 10px rgba(125,211,252,.25);

  /* ── Conversation items ─────────────────────────────────── */
  --conv-item-title-color:    #bae6fd;
  --conv-item-date-color:     rgba(186,230,253,.38);
  --conv-item-hover-bg:       rgba(255,255,255,.07);
  --conv-item-hover-border:   rgba(125,211,252,.20);
  --conv-item-selected-bg:    rgba(255,255,255,.12);
  --conv-item-selected-border: rgba(125,211,252,.45);
  --conv-item-selected-shadow: 0 0 12px rgba(125,211,252,.18);

  /* ── Section label ──────────────────────────────────────── */
  --section-label-color:      #bae6fd;
  --section-label-border:     rgba(186,230,253,.15);

  /* ── Query input ────────────────────────────────────────── */
  --query-bg:                 #f8fbff;
  --query-border-top:         1px solid rgba(186,230,253,.25);
  --query-input-bg:           #e0f2fe;
  --query-input-border:       1.5px solid #bae6fd;
  --query-input-radius:       14px;
  --query-input-focus-border: #7dd3fc;
  --query-input-focus-shadow: 0 0 0 3px rgba(125,211,252,.22);
  --query-send-bg:            linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
  --query-send-shadow:        0 2px 8px rgba(2,132,199,.30);
  --query-send-hover-shadow:  0 0 14px rgba(125,211,252,.50), 0 2px 8px rgba(2,132,199,.30);

  /* ── Json2Html ──────────────────────────────────────────── */
  --j2h-color:                #0c4a6e;
  --j2h-muted-color:          #0ea5e9;
  --j2h-title-color:          #075985;
  --j2h-table-border:         #bae6fd;
  --j2h-table-header-bg:      #e0f2fe;
  --j2h-note-bg:              #e0f2fe;
  --j2h-note-border:          #0284c7;
  --j2h-formula-bg:           #e0f2fe;
  --j2h-formula-border:       #bae6fd;
}