/* ════════════════════════════════════════════════════════════════
   Design tokens
   ──────────────────────────────────────────────────────────────── */
:root {
  /* Brand — Klein blue #002FA7 (single anchor color) */
  --color-primary:        #002FA7;
  --color-primary-hover:  #001F7A;
  --color-primary-soft:   #eef1f8;
  --color-primary-tint:   #d4dbef;

  /* Neutrals (light surface) */
  --color-bg:             #f4f6fa;       /* app background */
  --color-surface:        #ffffff;       /* cards, modals, bubbles */
  --color-surface-2:      #f8fafc;       /* nested surface, hover, table head */
  --color-surface-3:      #f1f5f9;       /* deeper neutral */
  --color-border:         #e5e9f0;       /* default border, was #e2e8f0 */
  --color-border-soft:    #eef1f6;       /* dividers */

  /* Neutrals (dark sidebar — kept dark in light mode) */
  --color-sidebar-bg:     #1c1f33;       /* slightly warmer than #1a1a2e */
  --color-sidebar-bg-2:   #14172a;       /* nested card on sidebar */
  --color-sidebar-divider:#2d3052;
  --color-sidebar-hover:  #2a2e4d;
  --color-sidebar-fg:     #e2e8f0;
  --color-sidebar-fg-mute:#94a3b8;
  --color-sidebar-fg-dim: #64748b;
  --color-sidebar-fg-faint:#475569;

  /* Text */
  --color-text:           #1e293b;
  --color-text-soft:      #475569;
  --color-text-mute:      #64748b;
  --color-text-dim:       #94a3b8;
  --color-text-on-primary:#ffffff;

  /* Status */
  --color-success:        #22c55e;
  --color-success-soft:   #f0fdf4;
  --color-success-tint:   #bbf7d0;
  --color-success-text:   #15803d;
  --color-warn:           #f59e0b;
  --color-warn-soft:      #fffbeb;
  --color-warn-tint:      #fde68a;
  --color-warn-text:      #92400e;
  --color-danger:         #ef4444;
  --color-danger-hover:   #dc2626;
  --color-danger-soft:    #fef2f2;
  --color-danger-tint:    #fecaca;
  --color-danger-text:    #991b1b;
  --color-info-soft:      #f0f9ff;
  --color-info-tint:      #bae6fd;
  --color-info-text:      #0369a1;

  /* Accent (compaction / knowledge / reasoning) */
  --color-accent:         #7c3aed;
  --color-accent-soft:    #faf5ff;
  --color-accent-tint:    #e9d8fd;
  --color-accent-text:    #6d28d9;

  /* User bubble — softened from solid blue to tinted */
  --color-user-bubble-bg: #2e6df0;       /* slightly deeper than primary for AA contrast */
  --color-user-bubble-fg: #ffffff;

  /* Send button gradient (primary action) — Klein blue, no purple */
  --send-btn-grad-from:   #002FA7;
  --send-btn-grad-to:     #001F7A;
  --send-btn-grad-hover-from: #1a4fc4;
  --send-btn-grad-hover-to:   #002FA7;
  --send-btn-dark-from:   #1a4fc4;
  --send-btn-dark-to:     #002FA7;
  --send-btn-dark-hover-from: #3a6fd8;
  --send-btn-dark-hover-to:   #1a4fc4;
  --send-btn-glow:        rgba(0, 47, 167, .4);
  --send-btn-ring:        rgba(0, 47, 167, .15);

  /* Radius (4-tier system) */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Shadow (subtle layered shadows) */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, .14), 0 4px 12px rgba(15, 23, 42, .06);

  /* Font sizes (8-tier scale) */
  --fs-2xs: 10px;
  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-md:  13px;
  --fs-lg:  14px;
  --fs-xl:  16px;
  --fs-2xl: 18px;
  --fs-3xl: 22px;

  /* Easing */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --t-fast: .12s var(--ease-out);
  --t-base: .18s var(--ease-out);

  /* Dark-mode helpers (consumed by selected rules; remain stable across themes) */
  --color-code-bg:        #0f172a;        /* code block background */
  --color-code-fg:        #e2e8f0;        /* code block text */
}

/* ────────────────────────────────────────────────────────────────
   Dark theme overrides — activated by <html data-theme="dark">
   Token-driven: only the variables here change; selectors stay shared.
   ──────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  /* Brand — Klein blue, brightened for dark bg */
  --color-primary:        #4a7ad8;
  --color-primary-hover:  #6a94e6;
  --color-primary-soft:   #172a47;
  --color-primary-tint:   #1e3a6d;

  /* Surfaces */
  --color-bg:             #0b0f1c;
  --color-surface:        #161a2c;
  --color-surface-2:      #1e2238;
  --color-surface-3:      #2a2f47;
  --color-border:         #2d3252;
  --color-border-soft:    #232842;

  /* Sidebar — keep darker than main to preserve depth */
  --color-sidebar-bg:     #0d1124;
  --color-sidebar-bg-2:   #181c33;
  --color-sidebar-divider:#272c4a;
  --color-sidebar-hover:  #2a2f4d;
  --color-sidebar-fg:     #e2e8f0;
  --color-sidebar-fg-mute:#94a3b8;
  --color-sidebar-fg-dim: #64748b;
  --color-sidebar-fg-faint:#4b536b;

  /* Text */
  --color-text:           #e6e8f0;
  --color-text-soft:      #c2c8d6;
  --color-text-mute:      #97a0b3;
  --color-text-dim:       #6b7388;

  /* Status — softened bg, brightened fg */
  --color-success-soft:   #14301f;
  --color-success-tint:   #2f5d3a;
  --color-success-text:   #6ee7b7;
  --color-warn-soft:      #3a2a08;
  --color-warn-tint:      #6b4a10;
  --color-warn-text:      #fcd34d;
  --color-danger-soft:    #3a1717;
  --color-danger-tint:    #6b1d1d;
  --color-danger-text:    #fca5a5;
  --color-info-soft:      #0a2540;
  --color-info-tint:      #1b3d5c;
  --color-info-text:      #7dd3fc;

  --color-accent:         #a78bfa;
  --color-accent-soft:    #261942;
  --color-accent-tint:    #3d2c66;
  --color-accent-text:    #c4b5fd;

  /* User bubble — keep brand-tinted but slightly muted */
  --color-user-bubble-bg: #3b82f6;
  --color-user-bubble-fg: #ffffff;

  /* Shadows in dark mode need to be deeper to read at all */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
  --shadow-sm: 0 2px 6px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 6px 20px rgba(0,0,0,.5),  0 2px 6px rgba(0,0,0,.3);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.6), 0 6px 16px rgba(0,0,0,.4);
}

/* Hex literals tied to light-mode visuals → re-paint for dark mode.
   Grouped here so future contributors find one place to tweak. */
[data-theme="dark"] .msg-bubble pre,
[data-theme="dark"] .schema-box,
[data-theme="dark"] .update-output,
[data-theme="dark"] .kb-card-sql {
  background: #0a0d1c;
  color: #c2c8d6;
}
[data-theme="dark"] .msg-bubble code {
  background: var(--color-surface-3); color: var(--color-text);
}
[data-theme="dark"] .reasoning-toggle:hover { background: #281947; }
[data-theme="dark"] .sb-status-dot { background: #475569; }
[data-theme="dark"] .send-btn:disabled { background: #2d3252; }
[data-theme="dark"] .kb-badge-metric        { background: #1e3a6d; color: var(--color-primary); }
[data-theme="dark"] .kb-badge-rule-warning  { background: #3a2a08; color: #fcd34d; }
[data-theme="dark"] .kb-badge-rule-error    { background: #3a1717; color: #fca5a5; }
[data-theme="dark"] .kb-badge-note          { background: #261942; color: #c4b5fd; }
[data-theme="dark"] .slash-name mark        { background: #4a3a08; color: #fcd34d; }
[data-theme="dark"] .kb-import-zone         { border-color: #1e3a6d; }
[data-theme="dark"] .kb-import-zone.drag-over { background: #1e3a6d; }
[data-theme="dark"] .kb-import-hint         { color: var(--color-primary); }
[data-theme="dark"] .kb-card:hover          { border-color: #1e3a6d; }
[data-theme="dark"] .slash-popup-scroll::-webkit-scrollbar-thumb:hover { background: var(--color-text-dim); }
[data-theme="dark"] .ppt-btn-revise         { background: var(--color-surface-3);
  color: var(--color-text-soft); border-color: var(--color-border); }
[data-theme="dark"] .ppt-btn-revise:hover:not(:disabled) { background: var(--color-border); }
[data-theme="dark"] .ppt-btn-cancel         { background: var(--color-surface);
  color: var(--color-text-mute); border-color: var(--color-border); }
[data-theme="dark"] .ppt-btn-cancel:hover:not(:disabled) { background: var(--color-surface-2); }
[data-theme="dark"] .overlay { background: rgba(0,0,0,.55); }

/* Smooth theme transition for everyday surfaces */
html, body, .sidebar, .main, .chat-header, .input-area,
.msg-bubble, .modal, .sb-status, .sb-status-row, .saved-item,
.preview-table, .preview-table th, .preview-table td, .tool-step {
  transition: background-color var(--t-base), color var(--t-base),
              border-color var(--t-base);
}

/* ── Reset & base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
  "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--color-bg); color: var(--color-text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Focus ring for keyboard users */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); }