/* ============================================
   kbGPT — theme tokens
   ============================================
   The variable names and values are kept identical to kbMBS's styles.css on
   purpose: the chat UI was lifted from there and every component styles itself
   from these tokens. Changing a name here silently un-styles the chat.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;700&display=swap');

/* ── Dark (default) ───────────────────────────────────────────────────────── */
:root {
  --bg-primary:    #0a0a0a;
  --bg-secondary:  #111111;
  --bg-card:       #111111;
  --bg-card-hover: #161616;
  --bg-elevated:   #1a1a1a;
  --bg-overlay:    rgba(0, 0, 0, 0.82);
  --bg-chrome:     #080808;

  --accent:        #f97316;
  --accent-bright: #fb923c;
  --accent-muted:  #ea6c0a;
  --accent-dim:    rgba(249, 115, 22, 0.08);
  --accent-glow:   rgba(249, 115, 22, 0.18);
  --accent-bloom:  rgba(249, 115, 22, 0.04);

  --ai:      #f97316;
  --ai-dim:  rgba(249, 115, 22, 0.10);
  --ai-glow: rgba(249, 115, 22, 0.20);

  --green:        #22c55e;
  --green-bright: #4ade80;
  --green-dim:    rgba(34, 197, 94, 0.12);
  --red:          #ef4444;
  --red-bright:   #f87171;
  --red-dim:      rgba(239, 68, 68, 0.12);
  --amber:        #f59e0b;
  --amber-dim:    rgba(245, 158, 11, 0.12);

  --text-primary:   #e8e8e8;
  --text-secondary: #777777;
  --text-tertiary:  #444444;
  --text-muted:     #2a2a2a;

  --border:        #1e1e1e;
  --border-strong: #2a2a2a;
  --border-accent: rgba(249, 115, 22, 0.35);
  --border-hover:  rgba(249, 115, 22, 0.55);
  --border-subtle: #161616;
  --border-ai:     rgba(249, 115, 22, 0.25);

  --shadow-sm:     none;
  --shadow-md:     none;
  --shadow-lg:     0 4px 16px rgba(0,0,0,0.40);
  --shadow-accent: 0 0 0 1px rgba(249,115,22,0.30);
  --shadow-ai:     0 0 0 1px rgba(249,115,22,0.22);

  --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-data: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  --r-xs:   3px;
  --r-sm:   5px;
  --r-md:   7px;
  --r-lg:   10px;
  --r-xl:   14px;
  --r-pill: 9999px;
}

/* ── Light ────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-primary:    #f5f5f5;
  --bg-secondary:  #ededed;
  --bg-card:       #ffffff;
  --bg-card-hover: #fafafa;
  --bg-elevated:   #f0f0f0;
  --bg-overlay:    rgba(0, 0, 0, 0.55);
  --bg-chrome:     #e8e8e8;

  --accent:        #e8640a;
  --accent-bright: #f97316;
  --accent-muted:  #c85800;
  --accent-dim:    rgba(232, 100, 10, 0.08);
  --accent-glow:   rgba(232, 100, 10, 0.16);
  --accent-bloom:  rgba(232, 100, 10, 0.04);

  --ai:      #e8640a;
  --ai-dim:  rgba(232, 100, 10, 0.08);
  --ai-glow: rgba(232, 100, 10, 0.16);

  --green:        #16a34a;
  --green-bright: #22c55e;
  --green-dim:    rgba(22, 163, 74, 0.10);
  --red:          #dc2626;
  --red-bright:   #ef4444;
  --red-dim:      rgba(220, 38, 38, 0.10);
  --amber:        #d97706;
  --amber-dim:    rgba(217, 119, 6, 0.12);

  --text-primary:   #111111;
  --text-secondary: #666666;
  --text-tertiary:  #999999;
  --text-muted:     #cccccc;

  --border:        #e0e0e0;
  --border-strong: #cccccc;
  --border-accent: rgba(232, 100, 10, 0.30);
  --border-hover:  rgba(232, 100, 10, 0.50);
  --border-subtle: #ebebeb;
  --border-ai:     rgba(232, 100, 10, 0.22);

  --shadow-sm:     0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:     none;
  --shadow-lg:     0 4px 16px rgba(0,0,0,0.08);
  --shadow-accent: 0 0 0 1px rgba(232,100,10,0.25);
  --shadow-ai:     0 0 0 1px rgba(232,100,10,0.20);
}

/* ── Y2K ──────────────────────────────────────────────────────────────────── */
[data-theme="y2k"] {
  --bg-primary:    #d6d3c8;
  --bg-secondary:  #c8c5b9;
  --bg-card:       #ece9dd;
  --bg-card-hover: #f7f3e8;
  --bg-elevated:   #fffdf1;
  --bg-overlay:    rgba(30, 28, 36, 0.52);
  --bg-chrome:     #beb9aa;

  --accent:        #2737d8;
  --accent-bright: #00a3ff;
  --accent-muted:  #1b248e;
  --accent-dim:    rgba(39, 55, 216, 0.12);
  --accent-glow:   rgba(39, 55, 216, 0.22);
  --accent-bloom:  rgba(0, 163, 255, 0.08);

  --ai:      #008f87;
  --ai-dim:  rgba(0, 143, 135, 0.12);
  --ai-glow: rgba(0, 143, 135, 0.22);

  --green:        #008b3f;
  --green-bright: #00a651;
  --green-dim:    rgba(0, 139, 63, 0.14);
  --red:          #b01636;
  --red-bright:   #e11248;
  --red-dim:      rgba(176, 22, 54, 0.14);
  --amber:        #b26a00;
  --amber-dim:    rgba(178, 106, 0, 0.16);

  --text-primary:   #151515;
  --text-secondary: #333333;
  --text-tertiary:  #5d5a52;
  --text-muted:     #898477;

  --border:        #807b6e;
  --border-strong: #3a3833;
  --border-accent: #2737d8;
  --border-hover:  #ff00a8;
  --border-subtle: rgba(0, 0, 0, 0.18);
  --border-ai:     rgba(0, 143, 135, 0.35);

  --shadow-sm:     2px 2px 0 #ffffff, 4px 4px 0 rgba(0,0,0,0.34);
  --shadow-md:     2px 2px 0 #ffffff, 5px 5px 0 rgba(0,0,0,0.38);
  --shadow-lg:     3px 3px 0 #ffffff, 8px 8px 0 rgba(0,0,0,0.42);
  --shadow-accent: 4px 4px 0 rgba(255,0,168,0.42);
  --shadow-ai:     4px 4px 0 rgba(0,143,135,0.30);

  --font-ui:   Tahoma, Verdana, Geneva, Arial, sans-serif;
  --font-data: 'JetBrains Mono', 'Courier New', ui-monospace, monospace;

  --r-xs:   0px;
  --r-sm:   0px;
  --r-md:   0px;
  --r-lg:   0px;
  --r-xl:   0px;
  --r-pill: 0px;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { overflow: hidden; }

#root { height: 100%; width: 100%; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 157, 40, 0.22); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 157, 40, 0.44); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); }

button, input, textarea, select { font-family: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Boot screen — shown until React mounts, so a slow CDN never flashes white. */
.kb-boot {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 18px; background: var(--bg-primary); z-index: 9999;
}
.kb-boot-mark { width: 46px; height: 46px; opacity: 0.9; animation: kb-boot-pulse 1.6s ease-in-out infinite; }
.kb-boot-text { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-tertiary); }
@keyframes kb-boot-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1); } }