:root {
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;

  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  --ml-container: 72rem;
  --ml-container-wide: 82rem;
  --ml-container-narrow: 52rem;
  --container-compact: 38.75rem;
  --container-default: 56.25rem;
  --container-wide: 73.75rem;
  --ml-container-padding: clamp(1rem, 4vw, 2rem);
  --mobile-container-padding: clamp(0.9rem, 4vw, 1.15rem);
  --mobile-section-gap: clamp(1.7rem, 7vw, 2.45rem);
  --mobile-stack-gap: 0.85rem;
  --mobile-card-gap: 0.8rem;
  --mobile-card-padding: clamp(1rem, 4.5vw, 1.25rem);
  --mobile-hero-padding-start: clamp(1.35rem, 7vw, 2.2rem);
  --mobile-hero-padding-end: clamp(1.75rem, 8vw, 2.5rem);

  --ml-bg: rgb(247 249 252);
  --ml-surface: rgb(255 255 255);
  --ml-surface-alt: rgb(241 245 249);
  --ml-surface-elevated: rgb(255 255 255);
  --ml-text: rgb(15 23 42);
  --ml-text-muted: rgb(71 85 105);
  --ml-text-soft: rgb(100 116 139);
  --ml-border: rgb(217 226 239);
  --ml-border-soft: rgb(232 238 247);
  --border-soft: var(--ml-border-soft);
  --border-strong: var(--ml-border);
  --ml-primary: rgb(37 99 235);
  --ml-primary-hover: rgb(29 78 216);
  --ml-on-primary: rgb(255 255 255);
  --primary: var(--ml-primary);
  --primary-hover: var(--ml-primary-hover);
  --primary-foreground: var(--ml-on-primary);
  --text-inverse: var(--ml-on-primary);
  --ml-shadow: 0 18px 45px rgb(15 23 42 / 0.1);

  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.08);
  --shadow-md: 0 14px 35px rgb(15 23 42 / 0.1);
  --shadow-lg: 0 24px 70px rgb(15 23 42 / 0.14);
  --shadow-soft: var(--shadow-sm);
  --shadow-card: var(--shadow-md);
  --shadow-glow: 0 18px 42px color-mix(in srgb, var(--ml-primary) 18%, transparent);
  --shadow-focus: 0 0 0 3px rgb(37 99 235 / 0.22);

  --text-xs: clamp(0.78rem, 0.75rem + 0.12vw, 0.84rem);
  --text-sm: clamp(0.88rem, 0.84rem + 0.16vw, 0.96rem);
  --text-md: clamp(1rem, 0.96rem + 0.18vw, 1.08rem);
  --text-lg: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem);
  --text-xl: clamp(1.45rem, 1.2rem + 1vw, 2rem);
  --text-2xl: clamp(2rem, 1.45rem + 2.4vw, 3.5rem);
  --text-hero: clamp(2.35rem, 1.55rem + 4vw, 4.35rem);

  --font-size-xs: var(--text-xs);
  --font-size-sm: var(--text-sm);
  --font-size-md: var(--text-md);
  --font-size-lg: var(--text-lg);
  --font-size-xl: var(--text-xl);
  --font-size-2xl: var(--text-2xl);

  --line-tight: 1.08;
  --line-snug: 1.25;
  --line-normal: 1.6;
  --line-relaxed: 1.75;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;

  --btn-height-sm: 2.5rem;
  --btn-height-md: 3rem;
  --btn-height-lg: 3.35rem;
  --btn-padding-x-sm: 1rem;
  --btn-padding-x-md: 1.25rem;
  --btn-padding-x-lg: 1.5rem;
  --transition-fast: 0.15s ease;
  --transition-default: 0.22s ease;
  --transition-base: var(--transition-default);

  --bg-color: var(--ml-bg);
  --bg: var(--ml-bg);
  --card: var(--ml-surface);
  --text-color: var(--ml-text);
  --text: var(--ml-text);
  --muted: var(--ml-text-muted);
  --border: var(--ml-border);
  --border-color: var(--ml-border);
  --radius: var(--radius-md);
  --bg-soft: var(--ml-surface-alt);
  --text-muted: var(--ml-text-muted);
  --color-surface: var(--ml-surface);
  --color-surface-soft: var(--ml-surface-alt);
  --color-surface-elevated: var(--ml-surface-elevated);
  --color-text: var(--ml-text);
  --color-text-muted: var(--ml-text-muted);
  --color-border: var(--ml-border);
  --color-border-soft: var(--ml-border-soft);
  --color-primary: var(--ml-primary);
  --color-primary-dark: var(--ml-primary-hover);
  --cta-bg: var(--ml-primary);
  --cta-bg-hover: var(--ml-primary-hover);
  --cta-text: var(--ml-on-primary);
}

@media (width <= 640px) {
  :root {
    --ml-container-padding: var(--mobile-container-padding);
  }
}

[data-theme="dark"],
html.dark {
  --ml-bg: rgb(7 17 31);
  --ml-surface: rgb(15 27 45);
  --ml-surface-alt: rgb(17 31 52);
  --ml-surface-elevated: rgb(22 36 58);
  --ml-text: rgb(237 244 255);
  --ml-text-muted: rgb(181 196 216);
  --ml-text-soft: rgb(143 162 187);
  --ml-border: rgb(148 163 184 / 0.22);
  --ml-border-soft: rgb(148 163 184 / 0.14);
  --border-soft: var(--ml-border-soft);
  --border-strong: var(--ml-border);
  --ml-primary: rgb(96 165 250);
  --ml-primary-hover: rgb(59 130 246);
  --ml-on-primary: rgb(7 17 31);
  --primary: var(--ml-primary);
  --primary-hover: var(--ml-primary-hover);
  --primary-foreground: var(--ml-on-primary);
  --text-inverse: var(--ml-on-primary);
  --ml-shadow: 0 22px 60px rgb(0 0 0 / 0.34);

  --bg-color: var(--ml-bg);
  --bg: var(--ml-bg);
  --card: var(--ml-surface);
  --text-color: var(--ml-text);
  --text: var(--ml-text);
  --muted: var(--ml-text-muted);
  --border: var(--ml-border);
  --border-color: var(--ml-border);
  --bg-soft: var(--ml-surface-alt);
  --text-muted: var(--ml-text-muted);
  --color-surface: var(--ml-surface);
  --color-surface-soft: var(--ml-surface-alt);
  --color-surface-elevated: var(--ml-surface-elevated);
  --color-text: var(--ml-text);
  --color-text-muted: var(--ml-text-muted);
  --color-border: var(--ml-border);
  --color-border-soft: var(--ml-border-soft);
  --color-primary: var(--ml-primary);
  --color-primary-dark: var(--ml-primary-hover);
  --cta-bg: var(--ml-primary);
  --cta-bg-hover: var(--ml-primary-hover);
  --cta-text: var(--ml-on-primary);

  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.28);
  --shadow-md: 0 14px 35px rgb(0 0 0 / 0.32);
  --shadow-lg: 0 24px 70px rgb(0 0 0 / 0.42);
  --shadow-soft: var(--shadow-sm);
  --shadow-card: var(--shadow-md);
  --shadow-glow: 0 18px 42px color-mix(in srgb, var(--ml-primary) 20%, transparent);
  --shadow-focus: 0 0 0 3px rgb(96 165 250 / 0.28);
}