:root {
  /* Brand greens */
  --color-brand-primary: #485212;
  --color-body-text: #747E5B;
  --color-accent: #8FA517;
  --color-soft-green: #D2DBA2;
  --color-soft-green-light: #E8EDD0;

  /* Pinks */
  --color-primary-pink: #FE6C7D;
  --color-soft-pink: #FFC4CB;
  --color-soft-pink-light: #FFE1E5;

  /* Neutrals / surfaces */
  --color-surface-beige: #F4ECD4;
  --color-surface-beige-soft: #FBF7EE;
  --color-surface-beige-lighter: #FDFBF6;
  --color-page-background: #FFF3EA;

  /* Grays */
  --color-neutral-gray: #959595;
  --color-light-gray: #D9D9D9;

  /* Tracking quality colors */
  --color-tracking-limited: #E74C3C;   /* red */
  --color-tracking-basic: #F1C40F;     /* yellow */
  --color-tracking-regular: #3498DB;   /* blue */
  --color-tracking-excellent: #27AE60; /* green */

  /* Typography sizes */
  --font-size-h1: 48px;
  --font-size-h2: 24px;
  --font-size-body: 18px;
  --font-size-small: 15px;

  /* Spacing scale */
  --space-xxl: 48px;
  --space-xl: 32px;
  --space-lg: 24px;
  --space-md: 16px;
  --space-sm: 12px;
  --space-xxs: 6px;
  --space-xs: 8px;

  /* Radii */
  --radius-page-card: 30px;
  --radius-panel: 9px;
  --radius-primary-button: 16px;
  --radius-input: 12px;
  --radius-badge: 999px;
  --radius-checkbox: 25%;

  /* icons sizes */
  --icon-size-small: 22px;
  --icon-size-medium: 32px;
  --icon-size-large: 64px;
}