:root {
  color-scheme: light;

  /* Color tokens */
  --cp-color-gray-50: #f8faf8;
  --cp-color-gray-100: #f1f5f2;
  --cp-color-gray-200: #e3eae5;
  --cp-color-gray-300: #d0ddd3;
  --cp-color-gray-400: #b6c8ba;
  --cp-color-gray-500: #8ea296;
  --cp-color-gray-600: #637568;
  --cp-color-gray-700: #435247;
  --cp-color-gray-800: #26332a;
  --cp-color-gray-900: #172019;
  --cp-color-primary-50: #edf8ef;
  --cp-color-primary-100: #d7efdc;
  --cp-color-primary-500: #247a3d;
  --cp-color-primary-600: #1f6a35;
  --cp-color-primary-700: #185c2c;
  --cp-color-surface-dark: #236035;
  --cp-color-form-background: var(--cp-color-surface-dark);
  --cp-color-on-dark: #ffffff;
  --cp-color-on-dark-muted: #d7efdc;
  --cp-color-error-on-dark: #ffd7d2;
  --cp-color-secondary-500: #b7791f;
  --cp-color-cta: #f6b93b;
  --cp-color-cta-hover: #e2a92f;
  --cp-color-cta-active: #cf9826;
  --cp-color-success: #247a3d;
  --cp-color-warning: #b7791f;
  --cp-color-error: #a83d32;
  --cp-color-info: #286f9f;
  --cp-color-surface: #ffffff;
  --cp-color-background: var(--cp-color-gray-50);
  --cp-color-focus: #86b98d;

  /* Typography tokens */
  --cp-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cp-font-size-14: 0.9375rem;
  --cp-font-size-16: 1.0625rem;
  --cp-font-size-20: 1.25rem;
  --cp-font-size-24: 1.5rem;
  --cp-font-size-32: 2rem;
  --cp-font-size-40: 2.5rem;
  --cp-font-size-48: 3rem;
  --cp-font-weight-regular: 400;
  --cp-font-weight-semibold: 600;
  --cp-font-weight-bold: 700;
  --cp-line-height-base: 1.52;
  --cp-line-height-tight: 1.15;

  /* Spacing tokens: 4 px scale */
  --cp-space-1: 0.25rem;
  --cp-space-2: 0.5rem;
  --cp-space-3: 0.75rem;
  --cp-space-4: 1rem;
  --cp-space-5: 1.25rem;
  --cp-space-6: 1.5rem;
  --cp-space-8: 2rem;
  --cp-space-10: 2.5rem;
  --cp-space-12: 3rem;

  /* Shape, border and elevation tokens */
  --cp-radius-4: 0.25rem;
  --cp-radius-8: 0.5rem;
  --cp-radius-12: 0.75rem;
  --cp-radius-16: 1rem;
  --cp-radius-pill: 999px;
  --cp-border-width: 1px;
  --cp-border-subtle: var(--cp-color-gray-300);
  --cp-border-default: var(--cp-color-gray-400);
  --cp-border-strong: var(--cp-color-gray-500);
  --cp-shadow-low: 0 1px 2px rgba(23, 32, 25, 0.06), 0 4px 12px rgba(23, 32, 25, 0.05);
  --cp-shadow-medium: 0 8px 24px rgba(23, 32, 25, 0.1);
  --cp-shadow-high: 0 18px 48px rgba(23, 32, 25, 0.16);

  /* Motion and layer tokens */
  --cp-duration-100: 100ms;
  --cp-duration-200: 200ms;
  --cp-duration-300: 300ms;
  --cp-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --cp-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --cp-z-base: 0;
  --cp-z-dropdown: 10;
  --cp-z-sticky: 20;
  --cp-z-toast: 40;
  --cp-z-modal: 50;
  --cp-z-tooltip: 60;

  /* Layout tokens */
  --cp-container-max: 75rem;
  --cp-breakpoint-md: 48rem;
  --cp-breakpoint-lg: 64rem;
  --cp-breakpoint-xl: 80rem;
  --cp-touch-target: 2.75rem;

  /* Compatibility aliases for existing modules */
  --color-background: var(--cp-color-background);
  --color-surface: var(--cp-color-surface);
  --color-surface-soft: var(--cp-color-primary-50);
  --color-text: var(--cp-color-gray-900);
  --color-muted: var(--cp-color-gray-600);
  --color-primary: var(--cp-color-primary-500);
  --color-primary-dark: var(--cp-color-primary-700);
  --color-border: var(--cp-border-default);
  --color-border-strong: var(--cp-border-strong);
  --color-error: var(--cp-color-error);
  --color-focus: var(--cp-color-focus);
  --shadow-soft: var(--cp-shadow-low);
  --radius-sm: var(--cp-radius-8);
  --radius-md: var(--cp-radius-8);
  --space-1: var(--cp-space-1);
  --space-2: var(--cp-space-2);
  --space-3: var(--cp-space-3);
  --space-4: var(--cp-space-4);
  --space-5: var(--cp-space-6);
  --space-6: var(--cp-space-8);
  --font-main: var(--cp-font-family-base);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-background);
  font-family: var(--font-main);
  font-size: var(--cp-font-size-16);
  font-weight: var(--cp-font-weight-regular);
  line-height: var(--cp-line-height-base);
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-primary-dark);
  text-underline-offset: 0.18em;
  transition: color var(--cp-duration-100) var(--cp-ease-standard);
}

a:hover,
a:focus-visible {
  color: var(--cp-color-secondary-500);
}

button,
input,
select,
textarea {
  font: inherit;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: var(--space-2);
  font-size: var(--cp-font-size-24);
  font-weight: var(--cp-font-weight-bold);
  line-height: var(--cp-line-height-tight);
}

h2 {
  margin-bottom: var(--space-2);
  font-size: var(--cp-font-size-20);
  font-weight: var(--cp-font-weight-bold);
  line-height: var(--cp-line-height-tight);
}

h3 {
  margin-bottom: var(--space-2);
  font-size: var(--cp-font-size-16);
  font-weight: var(--cp-font-weight-bold);
}

p {
  color: var(--color-muted);
}

@media (min-width: 768px) {
  :root {
    --cp-font-size-14: 0.875rem;
    --cp-font-size-16: 1rem;
    --cp-line-height-base: 1.5;
  }
}

@media (min-width: 980px) {
  h1 {
    font-size: var(--cp-font-size-32);
  }
}