:root, [data-theme="light"] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --color-bg: #f6f5f1;
  --color-surface: #faf9f6;
  --color-surface-2: #f0ede7;
  --color-surface-offset: #e7e3dc;
  --color-border: #d8d3cb;
  --color-text: #1f201c;
  --color-text-muted: #687067;
  --color-text-faint: #95998f;
  --color-primary: #0d666f;
  --color-primary-hover: #0c4e54;
  --color-text-inverse: #f8f8f4;
  --color-success: #3f7b31;
  --color-warning: #a25f23;

  --shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.06);
  --shadow-md: 0 18px 42px oklch(0.2 0.01 80 / 0.1);

  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;

  --font-body: 'Satoshi', 'Inter', sans-serif;
  --font-display: 'General Sans', 'Inter', sans-serif;
}

[data-theme="dark"] {
  --color-bg: #131513;
  --color-surface: #1b1e1b;
  --color-surface-2: #242924;
  --color-surface-offset: #2d332e;
  --color-border: #363b36;
  --color-text: #d7ddd4;
  --color-text-muted: #96a195;
  --color-text-faint: #6f786f;
  --color-primary: #5ea3ac;
  --color-primary-hover: #7bb9c1;
  --color-text-inverse: #111311;
  --color-success: #7dc26b;
  --color-warning: #d59a56;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / .2);
  --shadow-md: 0 18px 42px oklch(0 0 0 / .38);
}