/* ========================================
   Design Tokens — Light Mode
   ======================================== */
:root {
  /* Backgrounds */
  --bg-primary: #f3f5fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f4f7fa;

  /* Text */
  --text-primary: #222;
  --text-secondary: #6c757d;
  --text-inverse: #ffffff;
  --text-primary-inverse: #eef;

  /* Borders */
  --border-color: #d8e2e0;

  /* Accents */
  --accent-primary: #007cbc;
  --accent-success-dim: #0a9129;
  --accent-success: #0bb22d;
  --accent-success-light: #eef9f3;
  --accent-warning: #dc950c;
  --accent-danger: #dc3545;
  --accent-link: #1c6dc2;
  --tips-title-color: #906103d0;

  --shadow: rgba(0, 0, 0, 0.08);
  --shadow-hover: rgba(0, 0, 0, 0.15);

  /* Form / Component */
  --input-bg: #ffffff;
  --input-border: #ced4da;
  --input-focus: #737785;
  --button-hover: #6b6e7e;
  --ad-bg: #f8f9fa;
  --ad-border: #dee2e6;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Fonts */
  --ff: "Nunito", sans-serif;
  --ff-mono: Merriweather, serif;

  /* Transition */
  --transition: all 0.4s ease;
}

/* ========= Dark Mode ========== */
body.dark-mode {
  --bg-primary: #1a1a2e;
  --bg-secondary: #16213e;
  --bg-tertiary: #0f3460;
  --text-primary: #eaeaea;
  --text-secondary: #a0aec0;
  --text-inverse: #1a1a2e;
  --text-primary-inverse: #cfd8e3;
  --border-color: #2d3748;

  --shadow: rgba(0, 0, 0, 0.3);
  --shadow-hover: rgba(0, 0, 0, 0.5);

  --input-bg: #16213e;
  --input-border: #2d3748;
  --tips-title-color: var(--text-primary);
}