:root {
  /* ========== COLORS ========== */

  /* Brand primary colors */
  --color-accent: #3b82f6; /* Blue accent */
  --color-accent-secondary: #8b5cf6; /* Purple */

  --color-spinner: #f1f5f9;
  --color-spinner-secondary: #3b82f6;

  /* Background colors */
  --color-bg-primary: #0f172a; /* Dark blue background */
  --color-bg-secondary: #1e293b; /* Card background */

  /* Text colors */
  --color-text-primary: #f1f5f9; /* Light text */
  --color-text-secondary: #94a3b8; /* Muted text */

  /* ========== SIZES AND SPACING ========== */

  /* Container sizes */
  --container-max: 1200px;
  --gap-lg: 48px;
  --gap-md: 24px;
  --gap-sm: 16px;

  /* Font sizes */
  --font-size-sm: 14px;
  --font-size-md: 18px;
  --font-size-lg: 24px;
  --font-size-xl: 48px;

  /* ========== BORDER RADIUS ========== */

  --border-radius-md: 8px;
  --border-radius-lg: 16px;

  /* ========== SHADOWS ========== */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-glow: 0 4px 18px rgba(255, 154, 61, 0.25);

  /* ========== TRANSITIONS ========== */

  --transition-fast: 200ms ease;
  --transition-normal: 300ms ease;
}