/* Token definitions for colours, typography, spacing and other design constants.
   These variables drive the entire design system and make it easy to adjust
   global styling from a single place. */

:root {
  /* Colour palette */
  --color-primary: #0A84FF;
  --color-black: #0D0D0D;
  --color-gray:  #2D2D2D;
  --color-white: #F8FAFC;
  --color-green: #39E29D;

  /* Typography */
  --font-heading: 'Inter Tight', 'SF Pro Display', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Spacing – based off an 8px scale */
  --spacing-1: 0.5rem; /* 8px */
  --spacing-2: 1rem;   /* 16px */
  --spacing-3: 1.5rem; /* 24px */
  --spacing-4: 2rem;   /* 32px */
  --spacing-5: 2.5rem; /* 40px */
  --spacing-6: 3rem;   /* 48px */

  /* Border radius */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 16px;

  /* Shadows */
  --shadow-small: 0 2px 4px rgba(0,0,0,0.12);
  --shadow-medium: 0 4px 12px rgba(0,0,0,0.15);
}