/* GIGACHAD-QA design tokens — §16.2, verbatim. */
:root {
  /* ---- Color: light mode (default) ---- */
  --bg:                 #fbfbfd;
  --bg-elev-1:          #ffffff;
  --bg-elev-2:          #f5f5f7;
  --surface-glass:      rgba(255,255,255,0.72);
  --line:               rgba(0,0,0,0.08);
  --line-strong:        rgba(0,0,0,0.14);
  --text-primary:       #1d1d1f;
  --text-secondary:     #6e6e73;
  --text-tertiary:      #86868b;
  --accent:             #0071e3;
  --accent-hover:       #0077ed;
  --accent-pressed:     #006edb;
  --danger:             #d70015;
  --warn:               #b25000;
  --ok:                 #028a3d;
  --provider-kimi:      #7c3aed;
  --provider-anthropic: #d97706;
  --provider-openai:    #059669;

  /* ---- Type ---- */
  --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --font-text:    'SF Pro Text',    -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --font-mono:    'SF Mono', 'JetBrains Mono', ui-monospace, monospace;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --tracking-tight: -0.022em;
  --tracking-snug:  -0.011em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;

  /* ---- Spacing (8-pt grid) ---- */
  --s-1:  4px;   --s-2:  8px;   --s-3: 12px;   --s-4: 16px;
  --s-5: 20px;   --s-6: 24px;   --s-8: 32px;   --s-10: 40px;
  --s-12: 48px;  --s-16: 64px;  --s-20: 80px;

  /* ---- Radii ---- */
  --r-sm:  6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 18px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-popup: 0 30px 60px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.10);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-instant: 100ms;
  --dur-fast:    180ms;
  --dur-base:    260ms;
  --dur-slow:    380ms;
  --dur-popup:   420ms;
}

/* Explicit theme override (header toggle) + system fallback. */
:root[data-theme="dark"] {
    --bg:             #000000;
    --bg-elev-1:      #1c1c1e;
    --bg-elev-2:      #2c2c2e;
    --surface-glass:  rgba(28,28,30,0.72);
    --line:           rgba(255,255,255,0.10);
    --line-strong:    rgba(255,255,255,0.18);
    --text-primary:   #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-tertiary:  #8e8e93;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:             #000000;
    --bg-elev-1:      #1c1c1e;
    --bg-elev-2:      #2c2c2e;
    --surface-glass:  rgba(28,28,30,0.72);
    --line:           rgba(255,255,255,0.10);
    --line-strong:    rgba(255,255,255,0.18);
    --text-primary:   #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-tertiary:  #8e8e93;
  }
}
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text-primary);
  font: var(--weight-regular) 15px/1.5 var(--font-text);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.wordmark .qa { color: var(--accent); }

button {
  font: var(--weight-semibold) 15px/1 var(--font-text);
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  padding: 14px 16px;
  transition: background-color var(--dur-instant) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
button:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:active:not(:disabled) { background: var(--accent-pressed); transform: translateY(0); }

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--line-strong);
}
.btn-secondary:hover:not(:disabled) { background: var(--bg-elev-2); }

input[type="text"] {
  font: var(--weight-regular) 15px/1.4 var(--font-text);
  color: var(--text-primary);
  background: var(--bg-elev-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 12px 14px;
  width: 100%;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,113,227,0.18);
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}