/* ════════════════════════════════════════════════════════════
   primitives.css — Capa 0: Variables base
   Toda variable visual de la app vive aquí.
   Los archivos de componentes NO tienen valores hardcoded.
   Los temas solo sobreescriben variables de este archivo.
   ════════════════════════════════════════════════════════════ */

:root {

  /* ── Tipografía ─────────────────────────────────────────── */
  --font-family:            system-ui, sans-serif;
  --font-size-sm:           11px;
  --font-size-base:         13px;
  --font-size-md:           15px;
  --font-weight-normal:     400;
  --font-weight-medium:     500;
  --font-weight-bold:       600;
  --font-weight-xbold:      700;
  --line-height-base:       1.5;

  /* ── Colores de superficie ──────────────────────────────── */
  --color-bg:               #f2f2f0;
  --color-surface-soft:     #fafaf8;
  --color-surface-strong:   #2c2e35;

  /* ── Texto ──────────────────────────────────────────────── */
  --color-text-soft:        #1c1c1e;
  --color-text-muted:       #72726e;
  --color-text-strong:      #f0f0ee;

  /* ── Bordes ─────────────────────────────────────────────── */
  --color-border:           #ddddd8;

  /* ── Acento ─────────────────────────────────────────────── */
  --color-accent:           #4a6fa5;
  --color-accent-soft:      #eef2f8;

  /* ── Hover ──────────────────────────────────────────────── */
  --color-hover-soft:       #ebebea;
  --color-hover-strong:     #1e2028;

  /* ── Semánticos ─────────────────────────────────────────── */
  --color-danger:           #c0392b;
  --color-danger-soft:      #fdf2f1;
  --color-success:          #27ae60;
  --color-success-soft:     #f0faf4;
  --color-warning:          #d68910;
  --color-warning-soft:     #fdf8ec;

  /* ── Forma ──────────────────────────────────────────────── */
  --radius-sm:              3px;
  --radius-base:            6px;
  --radius-md:              10px;
  --radius-lg:              16px;
  --radius-pill:            999px;

  /* ── Espaciado ──────────────────────────────────────────── */
  --space-xs:               4px;
  --space-sm:               8px;
  --space-md:               12px;
  --space-lg:               16px;
  --space-xl:               24px;

  /* ── Sombras ────────────────────────────────────────────── */
  --shadow-sm:              0 1px 2px rgba(0,0,0,.06);
  --shadow-base:            0 1px 4px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.03);
  --shadow-md:              0 4px 12px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.04);
  --shadow-lg:              0 8px 24px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04);

  /* ── Interacción ────────────────────────────────────────── */
  --transition-fast:        0.10s ease;
  --transition-base:        0.15s ease;
  --transition-slow:        0.25s ease;
  --focus-ring:             0 0 0 3px rgba(74,111,165,.20);

  /* ── Controles ──────────────────────────────────────────── */
  --control-height-sm:      26px;
  --control-height-base:    32px;
  --control-height-md:      38px;

  /* ── Layout — banda (header/footer) ─────────────────────── */
  --lyt-band-bg:            var(--color-surface-strong);
  --lyt-band-color:         var(--color-text-strong);
  --lyt-band-border:        none;
  --lyt-band-min-height:    44px;

  --lyt-header-bg:          var(--lyt-band-bg);
  --lyt-header-color:       var(--lyt-band-color);
  --lyt-header-border:      var(--lyt-band-border);

  /* ── Layout — paneles ───────────────────────────────────── */
  --lyt-left-bg:            var(--color-surface-strong);
  --lyt-left-color:         var(--color-text-strong);
  --lyt-left-border:        none;

  --lyt-right-bg:           var(--color-surface-soft);
  --lyt-right-color:        var(--color-text-soft);

  /* ── Layout — resizer / scroll ──────────────────────────── */
  --lyt-resizer-bg:         rgba(0,0,0,.06);
  --lyt-resizer-bg-hover:   var(--color-accent);
  --lyt-scroll-thumb:       var(--color-border);
  --lyt-scroll-track:       transparent;

  /* ── Toolbar ────────────────────────────────────────────── */
  --toolbar-title-size:     14px;
  --toolbar-title-weight:   var(--font-weight-bold);
  --toolbar-sep-bg:         rgba(255,255,255,.15);

  /* ── Acento oscuro (hover de botón primary) ────────────── */
  --color-accent-dark:      #3d5d8a;

  /* ── Botones ghost ──────────────────────────────────────── */
  --btn-ghost-hover-border: var(--color-border);
  --btn-ghost-hover-bg:     transparent;

  /* ── Controles — estado inválido ────────────────────────── */
  --control-invalid-shadow: 0 0 0 3px rgba(192,57,43,.15);

  /* ── Form — secciones anidadas ──────────────────────────── */
  --form-section-d1-bg:     #3a3c44;
  --form-section-d2-bg:     #484a52;
  --form-scrollbar-hover:   #b0b0aa;

  /* ── Panel izquierdo — botón agregar ────────────────────── */
  --left-add-btn-bg:        rgba(255,255,255,.10);
  --left-add-btn-border:    rgba(255,255,255,.18);
  --left-add-btn-hover-bg:  rgba(255,255,255,.18);
  --left-empty-color:       rgba(255,255,255,.25);

  /* ── Miniburbujas en panel izquierdo ────────────────────── */
  --pair-mini-query-bg:     rgba(255,255,255,.12);
  --pair-mini-response-bg:  rgba(255,255,255,.06);

  /* ── Burbujas — estructura ──────────────────────────────── */
  --bubble-radius:          var(--radius-md);
  --bubble-padding:         10px 14px;
  --bubble-max-width:       80%;
  --bubble-border-width:    1px;
  --bubble-footer-size:     10px;
  --bubble-footer-opacity:  0.4;

  /* ── Burbujas — query (derecha) ─────────────────────────── */
  --bubble-query-bg:        var(--color-accent-soft);
  --bubble-query-border:    var(--color-border);
  --bubble-query-shadow:    var(--shadow-sm);
  --bubble-query-color:     var(--color-text-soft);

  /* ── Burbujas — response (izquierda) ────────────────────── */
  --bubble-response-bg:     var(--color-surface-soft);
  --bubble-response-border: var(--color-border);
  --bubble-response-shadow: var(--shadow-sm);
  --bubble-response-color:  var(--color-text-soft);

  /* ── Burbujas — hover (ambas) ───────────────────────────── */
  --bubble-hover-border:    var(--color-accent);
  --bubble-hover-shadow:    var(--shadow-md);

  /* ── Items del panel izquierdo ──────────────────────────── */
  --conv-item-radius:       var(--radius-base);
  --conv-item-padding:      9px 10px;
  --conv-item-title-color:  var(--lyt-left-color);
  --conv-item-title-size:   13px;
  --conv-item-title-weight: var(--font-weight-bold);
  --conv-item-date-color:   rgba(255,255,255,.35);
  --conv-item-date-size:    11px;
  --conv-item-hover-bg:     rgba(255,255,255,.07);
  --conv-item-hover-border: transparent;
  --conv-item-selected-bg:  rgba(255,255,255,.12);
  --conv-item-selected-border: rgba(255,255,255,.25);
  --conv-item-selected-shadow: none;

  /* ── Label de sección (panel izquierdo) ─────────────────── */
  --section-label-color:    var(--lyt-left-color);
  --section-label-size:     13px;
  --section-label-weight:   var(--font-weight-bold);
  --section-label-border:   rgba(255,255,255,.10);

  /* ── Query input ────────────────────────────────────────── */
  --query-bg:               var(--color-surface-soft);
  --query-border-top:       1px solid var(--color-border);
  --query-input-bg:         var(--color-surface-soft);
  --query-input-border:     1px solid var(--color-border);
  --query-input-radius:     var(--radius-base);
  --query-input-padding:    8px 12px;
  --query-input-focus-border: var(--color-accent);
  --query-input-focus-shadow: var(--focus-ring);
  --query-send-bg:          var(--color-accent);
  --query-send-radius:      var(--radius-pill);
  --query-send-shadow:      var(--shadow-sm);
  --query-send-hover-shadow: var(--shadow-md);

  /* ── Json2Html ──────────────────────────────────────────── */
  --j2h-size:               13px;
  --j2h-line-height:        1.5;
  --j2h-color:              var(--color-text-soft);
  --j2h-muted-color:        var(--color-text-muted);
  --j2h-title-size:         17px;
  --j2h-title-weight:       var(--font-weight-xbold);
  --j2h-title-color:        var(--color-text-soft);
  --j2h-section-title-size: 14px;
  --j2h-table-border:       var(--color-border);
  --j2h-table-header-bg:    var(--color-accent-soft);
  --j2h-code-bg:            #1f2430;
  --j2h-code-color:         #e6e6e6;
  --j2h-note-bg:            var(--color-accent-soft);
  --j2h-note-border:        var(--color-accent);
  --j2h-warning-bg:         var(--color-warning-soft);
  --j2h-warning-border:     var(--color-warning);
  --j2h-formula-bg:         var(--color-accent-soft);
  --j2h-formula-border:     var(--color-border);
}