/* ============================================
   JoJump — Design Tokens
   Fixed values that NEVER change with theme.
   Palette, fonts, brand colors, derived tints.
   ============================================ */

:root {
  /* === FONT === */
  --font-heading: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;

  /* === PALETTE (fixed, don't change with light/dark) === */
  --blue: #4285f4;
  --red: #ea4335;
  --yellow: #fbbc04;
  --green: #34a853;
  --purple: #9334e9;
  --magenta: #e91e8c;
  --orange: #fa903e;

  /* === AI ACCENT (Jo fish orange) === */
  --ai: #f97316;
  --ai-dark: #ea580c;
  --ai-bg: #fff7ed;

  /* === DERIVED TINTS (light bg for badges, hover, chips) === */
  --purple-bg: #f3e8ff;
  --purple-dark: #7c22d6;

  /* === SPACING SCALE (base 8px, Material grid) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* === RADIUS SCALE === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* === BLUE VARIANTS (for buttons hover/bg) === */
  --blue-hover: #3b78e7;
  --blue-bg: #e8f0fe;
}