/* ──────────────────────────────────────────────────────────────
   GAF Chatbot — Design Tokens
   Premium enterprise direction (Notion/Vercel/Linear DNA)
   Dark default · light theme via [data-theme="light"]
────────────────────────────────────────────────────────────── */

:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;

  --brand:        #4f8ef7;
  --brand-strong: #3b7dee;
  --brand-soft:   rgba(79, 142, 247, 0.12);
  --brand-line:   rgba(79, 142, 247, 0.32);
  --brand-glow:   rgba(79, 142, 247, 0.5);

  --green:        #2bb673;
  --green-soft:   rgba(43, 182, 115, 0.12);
  --amber:        #d97706;
  --amber-soft:   rgba(217, 119, 6, 0.14);
  --red:          #dc2626;
  --red-soft:     rgba(220, 38, 38, 0.14);
  --violet:       #8b5cf6;
  --violet-soft:  rgba(139, 92, 246, 0.14);
  --orange:       #f97316;
  --orange-soft:  rgba(249, 115, 22, 0.14);
}

:root,
[data-theme="dark"] {
  --bg-base:    #0a0d12;
  --bg-app:     #0e1218;
  --bg-elev:    #131820;
  --bg-elev2:   #1a2029;
  --bg-input:   #11161e;
  --bg-hover:   rgba(255, 255, 255, 0.04);
  --bg-active:  rgba(79, 142, 247, 0.1);

  --line:        #1f2731;
  --line-strong: #2a3440;
  --line-soft:   #161c25;

  --text:         #e7ecf3;
  --text-muted:   #98a2b3;
  --text-faint:   #6b7383;
  --text-inverse: #0a0d12;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.6);

  --grid-dot: rgba(255, 255, 255, 0.025);
}

[data-theme="light"] {
  --bg-base:   #f7f8fa;
  --bg-app:    #ffffff;
  --bg-elev:   #ffffff;
  --bg-elev2:  #f4f5f8;
  --bg-input:  #ffffff;
  --bg-hover:  rgba(15, 23, 42, 0.04);
  --bg-active: rgba(79, 142, 247, 0.08);

  --line:        #e6e8ec;
  --line-strong: #d4d7dd;
  --line-soft:   #eef0f3;

  --text:         #0c1118;
  --text-muted:   #5b6472;
  --text-faint:   #8b94a3;
  --text-inverse: #ffffff;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.06);
  --shadow-pop: 0 24px 60px rgba(15, 23, 42, 0.18);

  --grid-dot: rgba(15, 23, 42, 0.04);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::before, *::after { box-sizing: border-box; }

html, body {
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text);
  background: var(--bg-base);
}

button { font-family: inherit; }
input, textarea, select { font-family: inherit; }

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

::selection { background: var(--brand-soft); color: var(--text); }

.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: var(--bg-elev2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1;
}

/* ── Pill / Badge primitive ─────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 2px 8px;
  font-size: 10.5px;
  height: 18px;
  background: var(--bg-elev2);
  color: var(--text-muted);
  border: 1px solid var(--line);
}
.pill.xs { padding: 1px 6px; font-size: 9.5px; height: 16px; }
.pill.md { padding: 3px 10px; font-size: 11.5px; height: 22px; }

.pill.brand  { background: var(--brand-soft);  color: var(--brand);  border-color: var(--brand-line); }
.pill.green  { background: var(--green-soft);  color: var(--green);  border-color: transparent; }
.pill.amber  { background: var(--amber-soft);  color: var(--amber);  border-color: transparent; }
.pill.red    { background: var(--red-soft);    color: var(--red);    border-color: transparent; }
.pill.violet { background: var(--violet-soft); color: var(--violet); border-color: transparent; }
.pill.orange { background: var(--orange-soft); color: var(--orange); border-color: transparent; }

/* ── Logo lock-up ───────────────────────────────────────────── */

.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.logo-mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #4f8ef7 0%, #6366f1 100%);
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 3px rgba(0,0,0,0.3);
  flex-shrink: 0;
}
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.logo-name {
  font-weight: 650;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.logo-tag {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}