/* Breakpoints */
/* Variables do not work in media queries conditions. This is just for reference */
/* --breakpoint-sm: 550px; */
/* --breakpoint-md: 770px; */
/* --breakpoint-lg: 990px; */
/* --breakpoint-xl: 1200px; */

/* ===========================
   Design Tokens — Light Mode
   =========================== */
:root {
  /* Gray shades */
  --white: #fefeff;
  --gray-5: #f5f5fc;
  --gray-4: #d9d9dc;
  --gray-3: #a6a6aa;
  --gray-2: #6c757d;
  --gray-1: #254545;
  --black: #001;

  /* Backgrounds */
  --bg-primary: #f3f5fa;
  --bg-tertiary: #f4f6fa;

  /* Accent colors */
  --accent-primary: #007cbc;
  --accent-success-dim: #0a9129;
  --accent-success: #0bb22d;
  --accent-success-light: #f0faf4;
  --accent-warning: #d7910a;
  --accent-warning-light: #fff8dd;
  --accent-danger: #dc3545;
  --accent-link: #1c6dc2;

  /* Text */
  --text-primary: var(--gray-1);
  --text-secondary: var(--gray-2);

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

  /* Colours */
  --tips-title-color: #906103d0;

  --shadow: rgba(0, 0, 0, 0.1);
  --shadow-hover: rgba(0, 0, 0, 0.2);

  /* Form Component */
  --input-bg: #ffffff;
  --input-border: #ced4da;
  --input-focus: #a8a8a8;
  --button-hover: #79818f;
  --ad-bg: var(--bg-tertiary);
  --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 {
  --white: #222;
  --bg-primary: #363638;
  --bg-secondary: #16213e;
  --bg-tertiary: #0f3460;
  --text-primary: #eaeaea;
  --text-secondary: #a0aec0;
  --text-primary-inverse: var(--gray-4);
  --border-color: #2d3748;

  --accent-success-light: var(--gray-2);

  --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);
}