@layer tokens {
  :root {
    /* Global font families. Production should self-host these files. */
    --font-family-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-family-body: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* Fluid global type scale. */
    --font-size-00: 0.6875rem;
    --font-size-0: 0.75rem;
    --font-size-1: 0.875rem;
    --font-size-2: 1rem;
    --font-size-3: clamp(1.0625rem, 0.99rem + 0.25vw, 1.1875rem);
    --font-size-4: clamp(1.25rem, 1.14rem + 0.4vw, 1.5rem);
    --font-size-5: clamp(1.5rem, 1.28rem + 0.78vw, 2rem);
    --font-size-6: clamp(2rem, 1.65rem + 1.25vw, 2.75rem);
    --font-size-7: clamp(2.5rem, 1.9rem + 2.2vw, 4rem);
    --font-size-8: clamp(3.25rem, 2.1rem + 4.2vw, 6.25rem);
    --font-size-9: clamp(4rem, 2rem + 7vw, 8.5rem);

    /* Semantic type roles. Components consume these instead of inventing a scale. */
    --type-body: var(--font-size-2);
    --type-body-small: var(--font-size-1);
    --type-caption: var(--font-size-00);
    --type-action: 0.8125rem;
    --type-eyebrow: 0.8125rem;
    --type-hero-title: clamp(1.875rem, 3.1vw, 3rem);
    --type-section-title: clamp(2.625rem, 3.35vw, 3.25rem);
    --type-section-copy: clamp(1rem, 1.25vw, 1.125rem);
    --type-card-title: 2.125rem;
    --type-card-copy: 0.9375rem;
    --type-card-label: 0.6875rem;
    --type-press-label: 1.125rem;
    --type-card-number: 1.875rem;
    --type-step-title: 2rem;
    --type-stat-number: 4.125rem;
    --type-closing-line: clamp(2.125rem, 2.6vw, 2.375rem);
    --type-mobile-nav: clamp(1.8125rem, 8vw, 2.5rem);
    --type-form-heading: 1.5rem;
    --type-brand-wordmark: 1.5625rem;
    --type-brand-tagline: 0.625rem;
    --type-legal: 0.6875rem;

    --weight-body: var(--font-weight-regular);
    --weight-action: var(--font-weight-medium);
    --weight-eyebrow: var(--font-weight-bold);
    --weight-display: var(--font-weight-light);
    --weight-section-title: var(--font-weight-light);
    --weight-card-title: var(--font-weight-light);
    --weight-brand-wordmark: var(--font-weight-semibold);
    --weight-brand-tagline: var(--font-weight-bold);

    --line-height-solid: 0.92;
    --line-height-tight: 1.04;
    --line-height-heading: 1.1;
    --line-height-copy: 1.62;
    --line-height-loose: 1.75;

    --tracking-tighter: -0.025em;
    --tracking-tight: -0.012em;
    --tracking-normal: 0;
    --tracking-wide: 0.08em;
    --tracking-label: 0.18em;
    --tracking-label-wide: 0.22em;

    /* Four-point spacing scale plus fluid page rhythm. */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;
    --space-9: 3rem;
    --space-10: 4rem;
    --space-11: 5rem;
    --space-12: 6rem;
    --space-13: 8rem;
    --space-14: 10rem;
    --space-gutter: clamp(1.25rem, 3.5vw, 4rem);
    --space-section-sm: clamp(4rem, 7vw, 6.5rem);
    --space-section: clamp(5rem, 9vw, 9rem);
    --space-section-lg: clamp(6rem, 12vw, 12rem);

    /* Semantic layout rhythm shared by homepages and WordPress templates. */
    --layout-gutter: 2.5rem;
    --layout-section-compact: 5.625rem;
    --layout-section-default: 7.5rem;
    --layout-section-spacious: 8.125rem;
    --layout-grid-gap: 1.875rem;
    --layout-grid-gap-wide: 2.5rem;
    --layout-heading-gap: 4rem;
    --layout-card-padding: 1.875rem;

    /* Width and layout tokens. Breakpoint constants: 480, 767, 899, 1024, 1280. */
    --width-copy: 42rem;
    --width-content: 76rem;
    --width-wide: 90rem;
    --width-full: 120rem;
    --width-homepage: 85rem;
    --width-shell: 80rem;
    --width-legal: 68rem;

    --radius-0: 0;
    --radius-1: 0.25rem;
    --radius-2: 0.5rem;
    --radius-pill: 999px;

    /* Valtrion base palette extracted from the approved homepage. */
    --color-forest-950: #07110d;
    --color-forest-900: #0b1511;
    --color-forest-850: #0a1610;
    --color-forest-800: #0c2620;
    --color-forest-700: #13453a;
    --color-forest-600: #173629;
    --color-forest-500: #2c7d5b;
    --color-forest-400: #2c8862;
    --color-mint-300: #7fb59e;
    --color-mint-200: #9adcbb;
    --color-mint-100: #a9e8cc;
    --color-mint-50: #baf3d5;
    --color-paper-100: #eaefe7;
    --color-paper-50: #eff3ed;
    --color-white: #ffffff;
    --color-ink-light: #eef4f0;
    --color-ink-dark: #173629;

    /* Semantic aliases used by every component. */
    --color-background: var(--color-paper-50);
    --color-surface: var(--color-white);
    --color-surface-dark: var(--color-forest-900);
    --color-surface-dark-raised: var(--color-forest-800);
    --color-text: var(--color-ink-dark);
    --color-text-muted: rgb(23 54 41 / 68%);
    --color-text-inverse: var(--color-ink-light);
    --color-text-inverse-muted: rgb(238 244 240 / 72%);
    --color-accent: var(--color-mint-100);
    --color-accent-hover: var(--color-mint-50);
    --color-link: var(--color-forest-500);
    --color-border: rgb(23 54 41 / 20%);
    --color-border-inverse: rgb(255 255 255 / 18%);
    --color-border-control-inverse: rgb(255 255 255 / 34%);
    --color-border-control-inverse-strong: rgb(255 255 255 / 72%);
    --color-focus: var(--color-mint-50);

    /* Borders are deliberately square and stable across hover states. */
    --border-width-hairline: 1px;
    --border-width-subtle: 1px;
    --border-width-card: 2px;
    --border-color-card: rgb(201 225 213 / 48%);
    --border-color-card-hover: rgb(255 255 255 / 78%);
    --border-color-grid: #5e6d6c;
    --border-color-grid-divider: rgb(94 109 108 / 72%);

    --shadow-sm: 0 0.75rem 2rem -1.5rem rgb(7 17 13 / 35%);
    --shadow-md: 0 1.5rem 4rem -2rem rgb(7 17 13 / 45%);
    --shadow-glow: 0 2rem 5rem -2.2rem rgb(169 232 204 / 48%);
    --shadow-card-hover:
      0 2.125rem 4.75rem -2.125rem rgb(134 239 195 / 48%),
      0 2.75rem 5.5rem -2.75rem rgb(134 239 195 / 38%);
    --shadow-button-hover:
      0 1rem 2.375rem -1.375rem rgb(0 0 0 / 72%),
      0 0 1.75rem rgb(255 255 255 / 22%),
      0 0 3.625rem rgb(127 214 178 / 16%);

    --duration-fast: 180ms;
    --duration-base: 360ms;
    --duration-slow: 860ms;
    --duration-reveal: 1300ms;
    --duration-reveal-page: 720ms;
    --duration-hover: 520ms;
    --duration-image: 5s;
    --duration-marquee: 36s;
    --duration-counter-short: 520ms;
    --duration-counter: 980ms;
    --delay-counter: 60ms;
    --delay-hover: 36ms;
    --stagger-reveal: 74ms;
    --stagger-reveal-max: 350ms;
    --stagger-comparison-max: 400ms;
    --stagger-hero: 80ms;
    --stagger-hero-max: 390ms;
    --gap-reveal-groups: 160ms;
    --distance-reveal: 0.75rem;
    --ease-standard: cubic-bezier(0.37, 0, 0.28, 1);
    --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    --interaction-card-scale: 1.05;
    --interaction-image-scale-rest: 1.03;
    --interaction-image-scale-hover: 1.12;
    --interaction-lift: -0.125rem;
    --interaction-ring-card: inset 0 0 0 var(--border-width-card) var(--border-color-card-hover);

    --focus-ring: 0 0 0 3px rgb(169 232 204 / 35%);
  }

  @media (max-width: 64rem) {
    :root {
      --type-action: 0.6875rem;
      --type-eyebrow: 0.75rem;
      --type-section-title: 2.875rem;
      --type-brand-wordmark: 1.3125rem;
      --type-brand-tagline: 0.5rem;
      --layout-gutter: 1.5rem;
    }
  }

  @media (max-width: 47.9375rem) {
    :root {
      --type-action: 0.6875rem;
      --type-eyebrow: 0.6875rem;
      --type-section-title: clamp(2.125rem, 10vw, 2.625rem);
      --type-section-copy: 1rem;
      --type-closing-line: 1.5625rem;
      --type-card-title: 2.125rem;
      --type-card-copy: 0.875rem;
      --type-press-label: var(--type-caption);
      --type-step-title: 1.875rem;
      --type-stat-number: 3.625rem;
      --type-brand-wordmark: 1.125rem;
      --type-brand-tagline: 0.4375rem;
      --type-legal: 0.625rem;
      --layout-gutter: 1.5rem;
      --layout-section-compact: 5.625rem;
      --layout-section-default: 5.625rem;
      --layout-section-spacious: 5.625rem;
      --layout-grid-gap: 1rem;
      --layout-heading-gap: 3.125rem;
      --duration-reveal-page: 620ms;
      --distance-reveal: 0.5rem;
      --stagger-reveal: 0ms;
      --stagger-hero: 55ms;
      --duration-marquee: 30s;
      --gap-reveal-groups: 0ms;
    }
  }
}