@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand */
  --color-primary: #e0622a;
  --color-secondary: #2d7a6f;

  /* Backgrounds */
  --color-bg-page: #faf6f0;
  --color-bg-hero-image: #ede8df;
  --color-bg-table-alt: #f5f5f5;
  --color-bg-card: #ffffff;

  /* Text */
  --color-text-heading: #1a1a1a;
  --color-text-body: #5a5a5a;
  --color-text-subtle: #888888;

  /* UI */
  --color-border: #e3ddd6;
  --color-white: #ffffff;

  /* Font Family */
  --font-family-base: 'Inter', sans-serif;

  /* Font Size */
  --font-size-xs:   0.6875rem;
  --font-size-sm:   0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-lg:   1.25rem;
  --font-size-xl:   1.5rem;
  --font-size-2xl:  2rem;
  --font-size-3xl:  2.75rem;

  /* Font Weight */
  --font-weight-regular:   400;
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  /* Line Height */
  --line-height-tight:   1.15;
  --line-height-snug:    1.35;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.65;

  /* Letter Spacing */
  --letter-spacing-tight:  -0.02em;  /* hero H1 and large display */
  --letter-spacing-normal:  0em;     /* body and UI text */
  --letter-spacing-wide:    0.07em;  /* small uppercase labels */

  /* Border Radius */
  --radius-sm:   8px;    /* inputs, subtle rounding */
  --radius-md:   12px;   /* walker cards */
  --radius-lg:   20px;   /* hero illustration panel */
  --radius-pill: 999px;  /* buttons, badge pills */
  --radius-full: 50%;    /* circular avatars */
}