:root {
  /* Foundation: colors */
  --jd-color-black: #000000;
  --jd-color-white: #ffffff;
  --jd-color-blue-500: #2251ff;
  --jd-color-white-100: rgba(255, 255, 255, 1);
  --jd-color-white-80: rgba(255, 255, 255, 0.8);
  --jd-color-white-75: rgba(255, 255, 255, 0.75);
  --jd-color-white-70: rgba(255, 255, 255, 0.7);
  --jd-color-white-55: rgba(255, 255, 255, 0.55);
  --jd-color-white-50: rgba(255, 255, 255, 0.5);
  --jd-color-white-35: rgba(255, 255, 255, 0.35);
  --jd-color-white-25: rgba(255, 255, 255, 0.25);
  --jd-color-white-15: rgba(255, 255, 255, 0.15);
  --jd-color-header-backdrop: rgba(0, 0, 0, 0.96);

  /* Foundation: spacing and measure */
  --jd-space-4: 4px;
  --jd-space-8: 8px;
  --jd-space-12: 12px;
  --jd-space-14: 14px;
  --jd-space-16: 16px;
  --jd-space-24: 24px;
  --jd-space-28: 28px;
  --jd-space-32: 32px;
  --jd-space-40: 40px;
  --jd-space-72: 72px;
  --jd-space-80: 80px;
  --jd-space-112: 112px;
  --jd-size-28: 28px;
  --jd-size-160: 160px;
  --jd-size-180: 180px;
  --jd-size-224: 224px;
  --jd-size-336: 336px;
  --jd-border-hairline-width: 0.5px;
  --jd-border-rule-width: 1px;
  --jd-measure-container: 1280px;
  --jd-measure-section: 768px;
  --jd-measure-hero: 840px;
  --jd-measure-copy: 608px;
  --jd-page-padding-fluid: clamp(24px, 4vw, 48px);
  --jd-section-gap-fluid: clamp(56px, 8vw, 80px);
  --jd-hero-top-space-fluid: clamp(40px, 7vw, 72px);
  --jd-footer-padding-top-fluid: clamp(72px, 9vw, 112px);
  --jd-footer-gap-fluid: clamp(32px, 6vw, 72px);

  /* Foundation: typography */
  --jd-font-headline: Bower, "Freight Display Pro", Georgia, "Times New Roman", serif;
  --jd-font-body: Lato, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --jd-font-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --jd-font-size-12: 12px;
  --jd-font-size-16: 16px;
  --jd-font-size-24: 24px;
  --jd-font-size-32: 32px;
  --jd-font-size-40: 40px;
  --jd-line-height-16: 16px;
  --jd-line-height-24: 24px;
  --jd-line-height-32: 32px;
  --jd-line-height-40: 40px;
  --jd-letter-spacing-tight-xs: -0.2px;
  --jd-letter-spacing-tight-sm: -0.32px;
  --jd-letter-spacing-tight-md: -0.64px;
  --jd-letter-spacing-tight-lg: -0.8px;
  --jd-letter-spacing-tight-xl: -1.2px;
  --jd-letter-spacing-wide-sm: 0.06em;
  --jd-letter-spacing-wide-md: 0.1em;
  --jd-letter-spacing-wide-lg: 1.2px;
  --jd-type-size-hero-fluid: clamp(56px, 8vw, 64px);
  --jd-type-size-section-fluid: clamp(40px, 5vw, 48px);

  /* Semantic tokens */
  --jd-color-canvas: var(--jd-color-black);
  --jd-color-surface: #0a0a0a;
  --jd-color-surface-pressed: #141414;
  --jd-color-text-primary: var(--jd-color-white-100);
  --jd-color-text-secondary: var(--jd-color-white-70);
  --jd-color-text-tertiary: var(--jd-color-white-55);
  --jd-color-text-quaternary: var(--jd-color-white-50);
  --jd-color-text-nav: var(--jd-color-white-75);
  --jd-color-text-label: var(--jd-color-white-80);
  --jd-color-hairline: var(--jd-color-white-15);
  --jd-color-border-subtle: var(--jd-color-white-25);
  --jd-color-border-strong: var(--jd-color-white-35);
  --jd-color-accent: var(--jd-color-blue-500);
  --jd-color-inverse-bg: var(--jd-color-white);
  --jd-color-inverse-text: var(--jd-color-black);

  --jd-space-page-padding: var(--jd-page-padding-fluid);
  --jd-space-section: var(--jd-section-gap-fluid);
  --jd-space-section-tight: var(--jd-space-24);
  --jd-space-gutter: var(--jd-space-40);
  --jd-space-hero-top: var(--jd-hero-top-space-fluid);

  --jd-measure-page-shell: var(--jd-measure-container);
  --jd-measure-page-section: var(--jd-measure-section);
  --jd-measure-page-hero: var(--jd-measure-hero);
  --jd-measure-page-copy: var(--jd-measure-copy);

  --jd-type-family-headline: var(--jd-font-headline);
  --jd-type-family-body: var(--jd-font-body);
  --jd-type-family-mono: var(--jd-font-mono);
  --jd-type-size-body: var(--jd-font-size-16);
  --jd-type-size-meta: var(--jd-font-size-12);
  --jd-type-size-title-sm: var(--jd-font-size-24);
  --jd-type-size-title-md: var(--jd-font-size-32);
  --jd-type-size-title-lg: var(--jd-type-size-section-fluid);
  --jd-type-size-title-xl: var(--jd-type-size-hero-fluid);
  --jd-type-size-title-lg-tablet: var(--jd-font-size-32);
  --jd-type-size-title-lg-mobile: var(--jd-font-size-24);
  --jd-type-size-title-xl-tablet: var(--jd-font-size-40);
  --jd-type-size-title-xl-mobile: var(--jd-font-size-32);
  --jd-type-line-body: var(--jd-line-height-24);
  --jd-type-line-body-ratio: 1.5;
  --jd-type-line-meta: var(--jd-line-height-16);
  --jd-type-line-title-sm: var(--jd-line-height-32);
  --jd-type-line-title-md: var(--jd-line-height-40);
  --jd-type-letter-tight-xs: var(--jd-letter-spacing-tight-xs);
  --jd-type-letter-tight-sm: var(--jd-letter-spacing-tight-sm);
  --jd-type-letter-tight-md: var(--jd-letter-spacing-tight-md);
  --jd-type-letter-tight-lg: var(--jd-letter-spacing-tight-lg);
  --jd-type-letter-tight-xl: var(--jd-letter-spacing-tight-xl);
  --jd-type-letter-wide-sm: var(--jd-letter-spacing-wide-sm);
  --jd-type-letter-wide-md: var(--jd-letter-spacing-wide-md);
  --jd-type-letter-wide-lg: var(--jd-letter-spacing-wide-lg);

  /* Component tokens */
  --jd-header-height: 80px;
  --jd-brand-mark-height: 24px;
  --jd-cta-gap: var(--jd-space-8);
  --jd-cta-padding-bottom: var(--jd-space-4);
  --jd-cta-border-width: var(--jd-border-hairline-width);
  --jd-cta-border-color: var(--jd-color-white);
  --jd-section-divider-width: var(--jd-border-hairline-width);
  --jd-section-divider-color: var(--jd-color-hairline);
  --jd-rule-accent-width: 28px;
  --jd-rule-accent-height: 1px;
  --jd-faq-item-gap: var(--jd-space-24);
  --jd-faq-item-padding-y: var(--jd-space-24);
  --jd-footer-padding-top: var(--jd-footer-padding-top-fluid);
  --jd-footer-padding-bottom: var(--jd-space-28);
  --jd-footer-gap: var(--jd-footer-gap-fluid);
  --jd-footer-logo-width: var(--jd-size-336);
  --jd-footer-logo-width-mobile: var(--jd-size-224);

  /* Core page tokens */
  --jd-core-hero-stack-gap: var(--jd-space-32);
  --jd-core-hero-stack-gap-tablet: var(--jd-space-40);
  --jd-core-closing-stack-gap: var(--jd-space-24);
  --jd-core-hero-mobile-top: var(--jd-space-24);
  --jd-core-kicker-letter-spacing: var(--jd-type-letter-wide-lg);

  /* Homepage-specific tokens */
  --jd-home-hero-shell-columns: minmax(0, 1fr) minmax(460px, 560px);
  --jd-home-hero-shell-columns-narrow: minmax(0, 1fr) minmax(380px, 500px);
  --jd-home-hero-shell-gap: clamp(40px, 5vw, 72px);
  --jd-home-hero-shell-gap-narrow: clamp(32px, 4vw, 48px);
  --jd-home-hero-shell-gap-tablet: var(--jd-space-40);
  --jd-home-hero-shell-gap-mobile: var(--jd-space-32);
  --jd-home-hero-copy-max: 680px;
  --jd-home-hero-brand-height: var(--jd-brand-mark-height);
  --jd-home-footer-brand-height: clamp(32px, 4.5vw, 52px);
  --jd-home-hero-visual-width: 520px;
  --jd-home-hero-visual-height: clamp(260px, 58vw, 420px);
  --jd-home-hero-glow: radial-gradient(circle at center, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 34%, rgba(255, 255, 255, 0) 72%);
  --jd-home-hero-glow-blur: 18px;
  --jd-home-logos-max-width: var(--jd-measure-page-section);
  --jd-home-logos-padding-top: var(--jd-space-24);
  --jd-home-logo-min-height: var(--jd-brand-mark-height);
  --jd-home-logo-max-height: 28px;
  --jd-home-use-case-gap: var(--jd-space-40);
  --jd-home-use-case-padding-top: var(--jd-space-40);
  --jd-home-use-case-label-margin: var(--jd-space-16);
  --jd-home-use-case-label-letter-spacing: 1px;
  --jd-home-dialog-backdrop: rgba(0, 0, 0, 0.82);
  --jd-home-dialog-panel-width: min(1120px, calc(100vw - 32px));
  --jd-home-dialog-panel-width-mobile: min(100vw - 32px, 1120px);
  --jd-home-dialog-panel-padding: var(--jd-space-28);
  --jd-home-dialog-panel-padding-tablet: var(--jd-space-24);
  --jd-home-dialog-panel-padding-mobile: var(--jd-space-16);
  --jd-home-dialog-layout-gap: var(--jd-space-40);
  --jd-home-dialog-layout-margin-top: var(--jd-space-28);
  --jd-home-process-gap: 20px;
  --jd-home-process-label-letter-spacing: 1px;
  --jd-home-process-title-letter-spacing: -0.4px;
  --jd-home-process-step-gap: var(--jd-space-16);
  --jd-home-process-step-padding-y: var(--jd-space-16);
  --jd-home-process-circle-size: var(--jd-space-40);
  --jd-home-form-gap: var(--jd-space-24);
  --jd-home-form-grid-gap: var(--jd-space-24);
  --jd-home-form-field-gap: var(--jd-space-8);
  --jd-home-form-input-padding-y: var(--jd-space-12);
  --jd-home-form-placeholder: rgba(255, 255, 255, 0.4);
  --jd-home-form-focus-border: var(--jd-color-white);
  --jd-home-form-error: #ff8d8d;
  --jd-home-form-textarea-min-height: 144px;
  --jd-home-checkbox-gap: var(--jd-space-12);
  --jd-home-checkbox-margin-top: var(--jd-space-4);
  --jd-home-support-line-height: var(--jd-type-line-body);
  --jd-home-grid-gap-mobile: var(--jd-space-16);
  --jd-home-layout-gap-tablet: 28px;

  /* Page mode hooks */
  --jd-page-header-height: var(--jd-header-height);
  --jd-page-section-measure: var(--jd-measure-page-section);
}

:root,
[data-page-mode="home"],
[data-page-mode="home-like"] {
  --jd-page-header-height: var(--jd-header-height);
  --jd-page-section-measure: var(--jd-measure-page-section);
}

[data-page-mode="content"] {
  --jd-page-header-height: var(--jd-header-height);
  --jd-page-section-measure: var(--jd-measure-page-section);
}

:root {
  /* Legacy aliases for existing shared styles and page-local CSS */
  --canvas: var(--jd-color-canvas);
  --surface: var(--jd-color-surface);
  --surface-pressed: var(--jd-color-surface-pressed);
  --text-primary: var(--jd-color-text-primary);
  --text-secondary: var(--jd-color-text-secondary);
  --text-tertiary: var(--jd-color-text-tertiary);
  --text-quaternary: var(--jd-color-text-quaternary);
  --hairline: var(--jd-color-hairline);
  --border-subtle: var(--jd-color-border-subtle);
  --accent: var(--jd-color-accent);
  --container: var(--jd-measure-page-shell);
  --header-height: var(--jd-page-header-height);
  --hero-top-space: var(--jd-space-hero-top);
  --hero-measure: var(--jd-measure-page-hero);
  --copy-measure: var(--jd-measure-page-copy);
  --section-measure: var(--jd-page-section-measure);
  --section-text-size: var(--jd-type-size-body);
  --section-title-size: var(--jd-type-size-title-lg);
  --section-gap-tight: var(--jd-space-section-tight);
  --section-gap: var(--jd-space-section);
  --page-padding: var(--jd-space-page-padding);
  --gutter: var(--jd-space-gutter);
  --headline: var(--jd-type-family-headline);
  --body: var(--jd-type-family-body);
  --mono: var(--jd-type-family-mono);
}