:root{
  /* Brand & UI colors */
  --color-primary: #6fffe6;
  --color-accent: #006666;
  --color-bg: #ffffff;
  --color-text: #212121;
  --color-heading: #000000;
  --color-button-text: #212121;
  --color-button-bg: #ffffff;
  --color-button-hover: #5ce6d6;

  /* Layout */
  --container-max: 1200px;

  /* Spacing scale */
  --space-0: 0;
  --space-1: 10px;
  --space-2: 15px;
  --space-3: 20px;
  --space-4: 40px;
  --space-5: 50px;
  --space-6: 60px;

  /* Radius scale */
  --radius-sm: 8px;
  --radius-md: 20px;
  --radius-lg: 30px;

  /* Typography */
  --fs-base: 1rem;        /* 16px */
  --fs-md: 1.125rem;      /* 18px */
  --fs-xxl: 2.5rem;       /* 40px */
}

/* Optional helpers (use gradually) */
.round-sm{ border-radius: var(--radius-sm); }
.round-md{ border-radius: var(--radius-md); }
.round-lg{ border-radius: var(--radius-lg); }

.text-base{ font-size: var(--fs-base); }
.text-md{ font-size: var(--fs-md); }
.text-xxl{ font-size: var(--fs-xxl); }

.gap-1{ gap: var(--space-1); }
.gap-2{ gap: var(--space-2); }
.gap-3{ gap: var(--space-3); }
.gap-4{ gap: var(--space-4); }

.p-3{ padding: var(--space-3); }
.mt-4{ margin-top: var(--space-4); }
.mb-4{ margin-bottom: var(--space-4); }