:root {
  /* Primitive colors */
  --ivory-50: #fbfaf6;
  --ivory-100: #f4f1e8;
  --ivory-200: #e9e4d8;
  --ink-950: #0b1f1e;
  --ink-900: #102625;
  --petrol-800: #123b3a;
  --petrol-700: #19514e;
  --petrol-500: #2d7c74;
  --mint-500: #37d6a5;
  --mint-300: #8de6c8;
  --cyan-100: #dceff0;
  --white: #ffffff;

  /* Semantic colors */
  --color-bg: var(--ivory-50);
  --color-surface: var(--white);
  --color-surface-soft: var(--ivory-100);
  --color-text: var(--ink-950);
  --color-text-muted: #5f6e69;
  --color-inverse: var(--white);
  --color-brand: var(--petrol-800);
  --color-brand-strong: var(--ink-900);
  --color-accent: var(--mint-500);
  --color-border: rgb(16 38 37 / 14%);
  --color-border-inverse: rgb(255 255 255 / 24%);

  /* Typography */
  --font-display: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-body: "DM Sans", "Segoe UI", Arial, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: clamp(1.0625rem, 1rem + 0.22vw, 1.1875rem);
  --text-lg: clamp(1.25rem, 1.13rem + 0.4vw, 1.5rem);
  --text-xl: clamp(2rem, 1.4rem + 3.2vw, 4.25rem);
  --text-display: clamp(3.15rem, 2rem + 7.4vw, 7.75rem);
  --leading-tight: 0.95;
  --leading-heading: 1.02;
  --leading-body: 1.65;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.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;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Shape and layout */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;
  --container: 90rem;
  --gutter: 1rem;
  --section-space: clamp(5.5rem, 12vw, 10rem);

  /* Effects */
  --shadow-soft: 0 1.5rem 5rem rgb(11 31 30 / 10%);
  --shadow-card: 0 1rem 2.5rem rgb(11 31 30 / 9%);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 180ms;
  --duration-base: 360ms;
  --duration-slow: 720ms;
  --motion-step: 70ms;

  /* Semantic aliases used by the component layer */
  --color-bg-page: var(--color-bg);
  --color-bg-surface: var(--color-surface-soft);
  --color-bg-elevated: var(--color-surface);
  --color-text-primary: var(--color-text);
  --color-text-secondary: var(--color-text-muted);
  --color-white: var(--white);
  --color-ink: var(--ink-950);
  --color-petrol: var(--petrol-800);
  --color-petrol-soft: var(--petrol-500);
  --color-accent-strong: var(--petrol-500);
  --color-accent-soft: var(--mint-300);
  --color-border-on-dark: var(--color-border-inverse);
  --color-action-primary: var(--mint-500);
  --color-action-primary-hover: var(--mint-300);
  --color-action-primary-text: var(--ink-950);
  --color-focus-ring: var(--mint-500);
  --font-family-display: var(--font-display);
  --font-family-body: var(--font-body);
  --font-size-label: var(--text-xs);
  --font-size-body: var(--text-base);
  --font-size-body-lg: var(--text-md);
  --font-size-heading-sm: var(--text-lg);
  --font-size-heading-lg: var(--text-xl);
  --font-size-heading-xl: var(--text-xl);
  --font-size-display: var(--text-display);
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --letter-spacing-tight: -0.035em;
  --letter-spacing-label: 0.1em;
  --line-height-body: var(--leading-body);
  --line-height-heading: var(--leading-heading);
  --page-gutter: var(--gutter);
  --container-max: var(--container);
  --radius-card: var(--radius-xl);
  --shadow-button: 0 0.75rem 1.75rem rgb(11 31 30 / 18%);
  --shadow-button-hover: 0 1rem 2.25rem rgb(11 31 30 / 24%);
  --shadow-card-hover: 0 1.5rem 4rem rgb(11 31 30 / 15%);
  --shadow-glass: 0 1rem 3rem rgb(11 31 30 / 15%);
  --ease-standard: var(--ease-out);
  --duration-medium: var(--duration-base);
  --z-index-header: 50;
  --z-index-toast: 100;
}

@media (min-width: 48rem) {
  :root {
    --gutter: 1.5rem;
  }
}

@media (min-width: 90rem) {
  :root {
    --gutter: 2rem;
  }
}