/* Design Tokens - CSS Custom Properties */
:root {
  /* Colors - Surfaces */
  --surface-primary: #FFFFFF;
  --surface-secondary: #f2f4f5;
  --surface-invert: #1A1C1F;
  --surface-brand: #182439;
  --surface-accent: #FFD705;
  --surface-accent2: #1444F0;
  --surface--secondary-hover: rgba(242, 244, 245, 0.8);

  /* Colors - Text */
  --text-primary: #1A1C1F;
  --text-secondary: #535A61;
  --text-tertiary: #9DA2A7;
  --text-brand: #182439;
  --text-inverted: #F5F6F7;
  --text-accent: #FFD705;
  --text-accent2: #1444F0;

  /* Colors - Borders & Nav */
  --border-primary: #30363C;
  --border-secondary: #C1C4C8;
  --border-dark: #1A1C1F;
  --border-light: #ffffff;
  --navsurface: rgba(255, 255, 255, 0.8);

  /* Typography */
  --main-fontfamily: 'Satoshi', sans-serif;
  --sec-fontfamily: 'Barlow Condensed', sans-serif;

  /* Spacing */
  --spacing-0: 0;
  --spacing-300: 22px;
  --spacing-400: 10px;
  --spacing-500: 26px;
  --spacing-600: 36px;
  --spacing-700: 42px;

  /* Borders */
  --corner-default: 0px;
  --corner-full: 9999px;
}