/* ═══════════════════════════════════════════════════════════
   CSS Variables - Theming Foundation
   
   Principle: All color, spacing, and typography tokens live here.
   To theme: override these variables in a theme file.
   Never hardcode colors in component CSS.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Colors ── */
  --color-bg: #06070a;
  --color-surface: rgba(13, 17, 23, 0.78);
  --color-surface-solid: #0d1117;
  --color-surface-raised: rgba(23, 31, 42, 0.86);
  --color-border: rgba(138, 167, 189, 0.18);
  --color-border-subtle: rgba(138, 167, 189, 0.10);

  --color-text: #edf3f7;
  --color-text-secondary: #b8c6d1;
  --color-text-muted: #7f91a0;
  --color-text-dim: #536474;

  --color-accent: #6ee7c8;
  --color-accent-hover: #9ff4dc;
  --color-accent-bg: rgba(110, 231, 200, 0.13);

  --color-success: #74e7a4;
  --color-success-bg: rgba(116, 231, 164, 0.12);
  --color-warning: #ffd166;
  --color-warning-bg: rgba(255, 209, 102, 0.13);
  --color-error: #ff6b6b;
  --color-error-bg: rgba(255, 107, 107, 0.13);

  /* ── Thinking / Tool Specific ── */
  --color-thinking-border: rgba(255, 209, 102, 0.28);
  --color-thinking-bg: rgba(255, 209, 102, 0.08);
  --color-tool-bg: rgba(10, 13, 18, 0.82);
  --color-tool-border: rgba(110, 231, 200, 0.20);
  --color-tool-result: #9be7bd;

  /* ── User Message ── */
  --color-user-bg: rgba(110, 231, 200, 0.12);
  --color-user-border: rgba(110, 231, 200, 0.24);

  /* ── Assistant Message ── */
  --color-assistant-bg: rgba(237, 243, 247, 0.08);
  --color-assistant-border: rgba(237, 243, 247, 0.14);

  --matrix-color: #4dd7b7;

  /* ── Typography ── */
  --font-family: 'Avenir Next', 'Gill Sans', 'Trebuchet MS', sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
  --font-size-xs: 10px;
  --font-size-sm: 11px;
  --font-size-md: 12px;
  --font-size-base: 14px;
  --font-size-lg: 16px;

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

  /* ── Shape ── */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 999px;

  /* ── Layout ── */
  --sidebar-width: 280px;
  --header-height: 60px;
  --input-area-height: auto;

  /* ── Effects ── */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --shadow-soft: 0 24px 80px rgba(0, 0, 0, 0.34);
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.22);
  --blur-panel: blur(18px) saturate(140%);
}