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

:root {
  /* Font */
  --font: 'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --space-xs: 0.375rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Max width */
  --max-width: 960px;
}

/* ===== Light Theme (Default) ===== */
html[data-theme="light"] {
  --bg: #f0f0f0;
  --bg-page: #f5f5f5;
  --bg-card: #ffffff;
  --bg-card-hover: #fafafa;
  --bg-tag: #f3f3f3;
  --bg-tag-hover: #e8e8e8;
  --bg-input: #f5f5f5;
  --bg-header: rgba(255,255,255,0.85);

  --text-primary: #111111;
  --text-secondary: #444444;
  --text-muted: #777777;
  --text-faint: #aaaaaa;

  --border: #e2e2e2;
  --border-light: #efefef;
  --border-hover: #cccccc;

  --accent: #111111;
  --accent-soft: rgba(17,17,17,0.08);

  --dot-active: #111111;
  --dot-inactive: #cccccc;

  --chatbot-bg: #ffffff;
  --chatbot-msg-user: #111111;
  --chatbot-msg-user-text: #ffffff;
  --chatbot-msg-bot: #f0f0f0;
  --chatbot-msg-bot-text: #111111;

  --scrollbar-track: #f0f0f0;
  --scrollbar-thumb: #ccc;
}

/* ===== Dark Theme ===== */
html[data-theme="dark"] {
  --bg: #0f0f0f;
  --bg-page: #111111;
  --bg-card: #1a1a1a;
  --bg-card-hover: #222222;
  --bg-tag: #252525;
  --bg-tag-hover: #333333;
  --bg-input: #1e1e1e;
  --bg-header: rgba(15,15,15,0.85);

  --text-primary: #f0f0f0;
  --text-secondary: #b0b0b0;
  --text-muted: #777777;
  --text-faint: #555555;

  --border: #2a2a2a;
  --border-light: #1f1f1f;
  --border-hover: #444444;

  --accent: #ffffff;
  --accent-soft: rgba(255,255,255,0.08);

  --dot-active: #ffffff;
  --dot-inactive: #444444;

  --chatbot-bg: #1a1a1a;
  --chatbot-msg-user: #ffffff;
  --chatbot-msg-user-text: #111111;
  --chatbot-msg-bot: #252525;
  --chatbot-msg-bot-text: #f0f0f0;

  --scrollbar-track: #111;
  --scrollbar-thumb: #333;
}