/**
 * Melodic Design System — generated from design-system/tokens/*.tokens.json (DTCG).
 * Do not edit by hand: run `npm run tokens:build`.
 * Do not edit directly, this file was auto-generated.
 */

:root {
  color-scheme: dark;
  --ml-color-white: #ffffff;
  --ml-color-black: #0a0a0b;
  --ml-color-gray-50: #fafafa;
  --ml-color-gray-100: #f4f4f5;
  --ml-color-gray-200: #e4e4e7;
  --ml-color-gray-300: #d4d4d8;
  --ml-color-gray-400: #a1a1aa;
  --ml-color-gray-500: #71717a;
  --ml-color-gray-600: #52525b;
  --ml-color-gray-700: #3f3f46;
  --ml-color-gray-800: #27272a;
  --ml-color-gray-900: #18181b;
  --ml-color-night-600: #2c2340; /** Strongest hover fill */
  --ml-color-night-700: #221a33; /** Chips, nested surfaces */
  --ml-color-night-800: #161020; /** Cards, inputs, raised panels */
  --ml-color-night-900: #100b1c; /** Alternating section bands */
  --ml-color-night-950: #0b0814; /** Page background */
  --ml-color-lavender-100: #eceaf3; /** ~14:1 on night-800 */
  --ml-color-lavender-300: #aba4be; /** ~7:1 on night-800 */
  --ml-color-lavender-400: #948ca9; /** ~5:1 on night-800 */
  --ml-color-magenta-300: #ff5bae;
  --ml-color-magenta-400: #ff4da6;
  --ml-color-magenta-500: #ff0082; /** Logo magenta */
  --ml-color-magenta-600: #d6006a; /** Accessible magenta for text/UI on light */
  --ml-color-fuchsia-500: #b3179c; /** Mid-stop of the primary gradient */
  --ml-color-purple-300: #c77dff;
  --ml-color-purple-500: #49216d; /** Logo purple */
  --ml-color-purple-700: #2a1247;
  --ml-color-purple-800: #160b2b;
  --ml-color-purple-900: #0a0613;
  --ml-color-azure-300: #5ec9ee;
  --ml-color-azure-400: #38c6f4;
  --ml-color-azure-500: #009dd9; /** Logo azure */
  --ml-color-emerald-300: #6ee7b7;
  --ml-color-emerald-400: #34d399;
  --ml-color-emerald-500: #10b981;
  --ml-color-green-300: #86efac;
  --ml-color-green-400: #4ade80;
  --ml-color-green-500: #22c55e;
  --ml-color-green-600: #16a34a;
  --ml-color-amber-300: #fcd34d;
  --ml-color-amber-400: #fbbf24;
  --ml-color-amber-500: #f59e0b;
  --ml-color-amber-600: #d97706;
  --ml-color-yellow-500: #eab308;
  --ml-color-red-50: #fef2f2;
  --ml-color-red-400: #f87171;
  --ml-color-red-500: #ef4444;
  --ml-color-red-600: #dc2626;
  --ml-color-pink-400: #f472b6;
  --ml-color-pink-500: #ec4899;
  --ml-color-pink-700: #be185d;
  --ml-color-violet-400: #c084fc;
  --ml-color-blue-300: #93c5fd;
  --ml-color-blue-400: #60a5fa;
  --ml-color-cyan-300: #67e8f9;
  --ml-color-indigo-300: #a5b4fc;
  --ml-color-alpha-white-4: rgba(255, 255, 255, 0.04);
  --ml-color-alpha-white-5: rgba(255, 255, 255, 0.05);
  --ml-color-alpha-white-6: rgba(255, 255, 255, 0.06);
  --ml-color-alpha-white-7: rgba(255, 255, 255, 0.07);
  --ml-color-alpha-white-8: rgba(255, 255, 255, 0.08);
  --ml-color-alpha-white-10: rgba(255, 255, 255, 0.1);
  --ml-color-alpha-white-12: rgba(255, 255, 255, 0.12);
  --ml-color-alpha-white-16: rgba(255, 255, 255, 0.16);
  --ml-color-alpha-white-18: rgba(255, 255, 255, 0.18);
  --ml-color-alpha-white-20: rgba(255, 255, 255, 0.2);
  --ml-color-alpha-white-22: rgba(255, 255, 255, 0.22);
  --ml-color-alpha-white-35: rgba(255, 255, 255, 0.35);
  --ml-color-alpha-white-80: rgba(255, 255, 255, 0.8);
  --ml-color-alpha-black-5: rgba(0, 0, 0, 0.05);
  --ml-color-alpha-black-8: rgba(0, 0, 0, 0.08);
  --ml-color-alpha-black-10: rgba(0, 0, 0, 0.1);
  --ml-color-alpha-black-15: rgba(0, 0, 0, 0.15);
  --ml-color-alpha-black-25: rgba(0, 0, 0, 0.25);
  --ml-color-alpha-black-35: rgba(0, 0, 0, 0.35);
  --ml-color-alpha-black-60: rgba(0, 0, 0, 0.6);
  --ml-color-alpha-black-70: rgba(0, 0, 0, 0.7);
  --ml-color-alpha-night-72: rgba(11, 8, 20, 0.72); /** Header glass */
  --ml-color-alpha-magenta-10: rgba(255, 0, 130, 0.1);
  --ml-color-alpha-magenta-12: rgba(255, 0, 130, 0.12);
  --ml-color-alpha-magenta-14: rgba(255, 0, 130, 0.14);
  --ml-color-alpha-magenta-18: rgba(255, 0, 130, 0.18);
  --ml-color-alpha-magenta-20: rgba(255, 0, 130, 0.2);
  --ml-color-alpha-magenta-25: rgba(255, 0, 130, 0.25);
  --ml-color-alpha-magenta-30: rgba(255, 0, 130, 0.3);
  --ml-color-alpha-magenta-35: rgba(255, 0, 130, 0.35);
  --ml-color-alpha-magenta-38: rgba(255, 0, 130, 0.38);
  --ml-color-alpha-magenta-40: rgba(255, 0, 130, 0.4);
  --ml-color-alpha-magenta-55: rgba(255, 0, 130, 0.55);
  --ml-color-alpha-magenta-80: rgba(255, 0, 130, 0.8);
  --ml-color-alpha-azure-10: rgba(0, 157, 217, 0.1);
  --ml-color-alpha-azure-12: rgba(0, 157, 217, 0.12);
  --ml-color-alpha-azure-20: rgba(0, 157, 217, 0.2);
  --ml-color-alpha-azure-30: rgba(0, 157, 217, 0.3);
  --ml-color-alpha-azure-42: rgba(0, 157, 217, 0.42);
  --ml-color-alpha-purple-60: rgba(73, 33, 109, 0.6);
  --ml-color-alpha-emerald-18: rgba(16, 185, 129, 0.18);
  --ml-color-alpha-emerald-22: rgba(52, 211, 153, 0.22);
  --ml-color-alpha-emerald-25: rgba(110, 231, 183, 0.25);
  --ml-color-alpha-emerald-35: rgba(110, 231, 183, 0.35);
  --ml-color-alpha-amber-16: rgba(245, 158, 11, 0.16);
  --ml-color-alpha-amber-35: rgba(252, 211, 77, 0.35);
  --ml-color-alpha-red-10: rgba(248, 113, 113, 0.1);
  --ml-font-family-display: 'Space Grotesk', system-ui, sans-serif; /** Headings and display numbers */
  --ml-font-family-body: Inter, system-ui, sans-serif; /** Body, UI, labels */
  --ml-font-family-mono: 'JetBrains Mono', 'SF Mono', monospace; /** Code and file names */
  --ml-font-family-logo: Montserrat, system-ui, sans-serif; /** Wordmark only */
  --ml-font-weight-light: 300;
  --ml-font-weight-regular: 400;
  --ml-font-weight-medium: 500;
  --ml-font-weight-semibold: 600;
  --ml-font-weight-bold: 700;
  --ml-font-size-12: 0.75rem;
  --ml-font-size-13: 0.8125rem;
  --ml-font-size-14: 0.875rem;
  --ml-font-size-15: 0.9375rem;
  --ml-font-size-16: 1rem;
  --ml-font-size-17: 1.0625rem;
  --ml-font-size-18: 1.125rem;
  --ml-font-size-19: 1.1875rem;
  --ml-font-size-20: 1.25rem;
  --ml-font-size-22: 1.375rem;
  --ml-font-size-24: 1.5rem;
  --ml-font-size-26: 1.625rem;
  --ml-font-size-28: 1.75rem;
  --ml-font-size-32: 2rem;
  --ml-font-size-36: 2.25rem;
  --ml-font-size-40: 2.5rem;
  --ml-font-size-44: 2.75rem;
  --ml-font-size-48: 3rem;
  --ml-font-size-60: 3.75rem;
  --ml-font-size-68: 4.25rem;
  --ml-font-size-128: 8rem;
  --ml-font-line-height-none: 1;
  --ml-font-line-height-tight: 1.05;
  --ml-font-line-height-snug: 1.3;
  --ml-font-line-height-normal: 1.6;
  --ml-font-line-height-relaxed: 1.7;
  --ml-font-letter-spacing-tightest: -0.035em;
  --ml-font-letter-spacing-tighter: -0.03em;
  --ml-font-letter-spacing-tight: -0.025em;
  --ml-font-letter-spacing-snug: -0.02em;
  --ml-font-letter-spacing-normal: 0em;
  --ml-font-letter-spacing-wide: 0.05em;
  --ml-font-letter-spacing-wider: 0.09em;
  --ml-font-letter-spacing-widest: 0.1em;
  --ml-font-letter-spacing-logo: 0.34em;
  --ml-space-0: 0rem;
  --ml-space-1: 0.25rem;
  --ml-space-2: 0.5rem;
  --ml-space-3: 0.75rem;
  --ml-space-4: 1rem;
  --ml-space-5: 1.25rem;
  --ml-space-6: 1.5rem;
  --ml-space-7: 1.75rem;
  --ml-space-8: 2rem;
  --ml-space-9: 2.25rem;
  --ml-space-10: 2.5rem;
  --ml-space-12: 3rem;
  --ml-space-14: 3.5rem;
  --ml-space-16: 4rem;
  --ml-space-20: 5rem;
  --ml-space-24: 6rem;
  --ml-space-26: 6.5rem;
  --ml-space-28: 7rem;
  --ml-space-30: 7.5rem;
  --ml-radius-xs: 4px;
  --ml-radius-sm: 6px; /** Inline code, focus outlines */
  --ml-radius-md: 10px; /** Inputs, icon tiles, nav links */
  --ml-radius-lg: 16px; /** Cards */
  --ml-radius-xl: 24px; /** Feature panels, forms */
  --ml-radius-full: 9999px; /** Buttons, chips, labels */
  --ml-border-width-hairline: 1px;
  --ml-border-width-thick: 3px;
  --ml-blur-sm: 4px;
  --ml-blur-md: 8px;
  --ml-blur-lg: 12px;
  --ml-motion-duration-fast: 150ms;
  --ml-motion-duration-base: 200ms;
  --ml-motion-duration-slow: 300ms;
  --ml-motion-duration-reveal: 500ms;
  --ml-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ml-motion-easing-out: cubic-bezier(0, 0, 0.58, 1);
  --ml-breakpoint-sm: 640px;
  --ml-breakpoint-md: 900px;
  --ml-breakpoint-lg: 1024px;
  --ml-layout-container: 1280px; /** Header, footer, wide grids */
  --ml-layout-container-wide: 1100px; /** Product lists */
  --ml-layout-container-narrow: 1000px; /** Story, contact, case studies */
  --ml-layout-container-hero: 760px;
  --ml-layout-container-text: 640px; /** Section headers, CTA copy */
  --ml-layout-header-logo: 36px;
  --ml-size-icon-button: 36px;
  --ml-size-icon-tile-sm: 40px;
  --ml-size-icon-tile: 48px;
  --ml-size-icon-tile-lg: 56px;
  --ml-size-avatar: 48px;
  --ml-size-avatar-lg: 120px;
  --ml-size-dot: 6px;
  --ml-size-dot-lg: 8px;
  --ml-z-index-header: 100;
  --ml-z-index-overlay: 200;
  --ml-color-bg: var(--ml-color-night-950); /** Page background */
  --ml-color-bg-alt: var(--ml-color-night-900); /** Alternating section bands, footer */
  --ml-color-surface: var(--ml-color-night-800); /** Cards, inputs, raised panels */
  --ml-color-surface-raised: var(--ml-color-night-700); /** Chips, hover fills, nested surfaces */
  --ml-color-surface-hover: var(--ml-color-night-600); /** Strongest hover fill */
  --ml-color-border: var(--ml-color-alpha-white-10);
  --ml-color-border-on-dark: var(--ml-color-alpha-white-10); /** Hairline on surfaces that stay dark in every theme (featured cards, code cards) */
  --ml-color-border-strong: var(--ml-color-alpha-white-18);
  --ml-color-text: var(--ml-color-lavender-100); /** Primary text */
  --ml-color-text-muted: var(--ml-color-lavender-300); /** Secondary text */
  --ml-color-text-faint: var(--ml-color-lavender-400); /** Meta, least important */
  --ml-color-text-inverse: var(--ml-color-white); /** Text on brand-dark gradients */
  --ml-color-text-on-dark-muted: var(--ml-color-gray-400); /** Secondary text on brand-dark gradients and code cards */
  --ml-color-primary: var(--ml-color-magenta-600); /** Links, active nav, icons */
  --ml-color-primary-light: var(--ml-color-magenta-300); /** Eyebrow labels and icons on dark */
  --ml-color-primary-dark: var(--ml-color-purple-500);
  --ml-color-accent: var(--ml-color-azure-500); /** Secondary accent, project nav links */
  --ml-color-accent-light: var(--ml-color-azure-300);
  --ml-color-on-primary: var(--ml-color-white); /** Text on the primary gradient */
  --ml-color-footer-bg: var(--ml-color-night-900);
  --ml-color-footer-border: var(--ml-color-alpha-white-10);
  --ml-color-footer-muted: var(--ml-color-lavender-400);
  --ml-color-brand-magenta: var(--ml-color-magenta-500);
  --ml-color-brand-purple: var(--ml-color-purple-500);
  --ml-color-brand-azure: var(--ml-color-azure-500);
  --ml-color-glass-bg: var(--ml-color-alpha-white-8);
  --ml-color-glass-bg-subtle: var(--ml-color-alpha-white-6);
  --ml-color-glass-bg-hover: var(--ml-color-alpha-white-12);
  --ml-color-glass-border: var(--ml-color-alpha-white-18);
  --ml-color-glass-border-hover: var(--ml-color-alpha-white-35);
  --ml-color-glass-grid-line: var(--ml-color-alpha-white-5); /** Hero background grid texture */
  --ml-color-glass-header: var(--ml-color-alpha-night-72); /** Sticky header backdrop */
  --ml-color-tint-primary: var(--ml-color-alpha-magenta-10);
  --ml-color-tint-primary-border: var(--ml-color-alpha-magenta-18);
  --ml-color-tint-accent: var(--ml-color-alpha-azure-10);
  --ml-color-focus-ring: var(--ml-color-alpha-magenta-10);
  --ml-color-focus-ring-strong: var(--ml-color-alpha-magenta-14);
  --ml-color-focus-outline: var(--ml-color-magenta-600);
  --ml-color-status-success: var(--ml-color-green-400);
  --ml-color-status-success-dot: var(--ml-color-emerald-400); /** Pulsing availability dot */
  --ml-color-status-success-dot-ring: var(--ml-color-alpha-emerald-22);
  --ml-color-status-danger: var(--ml-color-red-400);
  --ml-color-status-danger-bg: var(--ml-color-alpha-red-10);
  --ml-color-status-live: var(--ml-color-emerald-300);
  --ml-color-status-live-bg: var(--ml-color-alpha-emerald-18);
  --ml-color-status-live-border: var(--ml-color-alpha-emerald-35);
  --ml-color-status-live-ring: var(--ml-color-alpha-emerald-25);
  --ml-color-status-soon: var(--ml-color-amber-300);
  --ml-color-status-soon-bg: var(--ml-color-alpha-amber-16);
  --ml-color-status-soon-border: var(--ml-color-alpha-amber-35);
  --ml-color-status-neutral: var(--ml-color-lavender-100);
  --ml-color-status-neutral-bg: var(--ml-color-alpha-white-12);
  --ml-color-status-neutral-border: var(--ml-color-alpha-white-22);
  --ml-color-syntax-keyword: var(--ml-color-violet-400);
  --ml-color-syntax-string: var(--ml-color-green-300);
  --ml-color-syntax-function: var(--ml-color-blue-400);
  --ml-color-syntax-property: var(--ml-color-blue-300);
  --ml-color-syntax-accent: var(--ml-color-amber-400); /** Decorators and highlighted properties */
  --ml-color-syntax-number: var(--ml-color-pink-400);
  --ml-color-syntax-class: var(--ml-color-cyan-300);
  --ml-color-syntax-tag: var(--ml-color-red-400);
  --ml-color-syntax-attr: var(--ml-color-indigo-300);
  --ml-color-syntax-text: var(--ml-color-gray-300);
  --ml-color-syntax-bg: var(--ml-color-gray-900);
  --ml-color-syntax-chrome: var(--ml-color-gray-800);
  --ml-color-syntax-chrome-border: var(--ml-color-gray-700);
  --ml-color-syntax-dot-red: var(--ml-color-red-500);
  --ml-color-syntax-dot-yellow: var(--ml-color-yellow-500);
  --ml-color-syntax-dot-green: var(--ml-color-green-500);
  --ml-gradient-primary: linear-gradient(120deg, var(--ml-color-magenta-500) 0%, var(--ml-color-fuchsia-500) 45%, var(--ml-color-azure-500) 100%); /** Magenta → fuchsia → azure. Primary buttons, gradient text, label dots. */
  --ml-gradient-dark: linear-gradient(165deg, var(--ml-color-purple-700) 0%, var(--ml-color-purple-800) 55%, var(--ml-color-purple-900) 100%); /** Deep purple → near-black. Hero, CTA, featured cards. */
  --ml-gradient-tint: linear-gradient(135deg, var(--ml-color-alpha-magenta-10) 0%, var(--ml-color-alpha-azure-10) 100%); /** 10% magenta → 10% azure wash. Icon tiles, section labels. */
  --ml-gradient-tint-strong: linear-gradient(135deg, var(--ml-color-alpha-magenta-20) 0%, var(--ml-color-alpha-azure-20) 100%);
  --ml-gradient-hero-text: linear-gradient(110deg, var(--ml-color-magenta-400) 0%, var(--ml-color-purple-300) 40%, var(--ml-color-azure-400) 100%); /** Bright accent for the one highlighted word in the home hero. */
  --ml-gradient-case-fintech: linear-gradient(135deg, var(--ml-color-magenta-500) 0%, var(--ml-color-azure-500) 100%);
  --ml-gradient-case-healthcare: linear-gradient(135deg, var(--ml-color-azure-500) 0%, var(--ml-color-purple-500) 100%);
  --ml-gradient-case-logistics: linear-gradient(135deg, var(--ml-color-amber-500) 0%, var(--ml-color-amber-600) 100%);
  --ml-gradient-case-languagebird: linear-gradient(135deg, var(--ml-color-green-500) 0%, var(--ml-color-green-600) 100%);
  --ml-gradient-case-saas: linear-gradient(135deg, var(--ml-color-pink-500) 0%, var(--ml-color-pink-700) 100%);
  --ml-shadow-sm: 0px 1px 2px 0px var(--ml-color-alpha-black-5);
  --ml-shadow-md: 0px 4px 6px -1px var(--ml-color-alpha-black-10), 0px 2px 4px -2px var(--ml-color-alpha-black-10);
  --ml-shadow-lg: 0px 10px 15px -3px var(--ml-color-alpha-black-10), 0px 4px 6px -4px var(--ml-color-alpha-black-10);
  --ml-shadow-xl: 0px 20px 25px -5px var(--ml-color-alpha-black-10), 0px 8px 10px -6px var(--ml-color-alpha-black-10);
  --ml-shadow-card-hover: 0px 14px 34px -16px var(--ml-color-alpha-black-70); /** Card lift on night surfaces */
  --ml-shadow-glow: 0px 0px 40px 0px var(--ml-color-alpha-magenta-18); /** Magenta ambient glow */
  --ml-shadow-hero-card: 0px 30px 60px -20px var(--ml-color-alpha-black-60), 0px 0px 60px 0px var(--ml-color-alpha-magenta-18);
  --ml-shadow-primary: 0px 4px 14px 0px var(--ml-color-alpha-magenta-30); /** Primary button resting */
  --ml-shadow-primary-hover: 0px 6px 20px 0px var(--ml-color-alpha-magenta-40);
  --ml-shadow-primary-sm: 0px 2px 8px 0px var(--ml-color-alpha-magenta-25); /** Compact primary button (header) */
  --ml-shadow-primary-sm-hover: 0px 4px 16px 0px var(--ml-color-alpha-magenta-35);
  --ml-shadow-focus: 0px 0px 0px 3px var(--ml-color-alpha-magenta-10); /** Input focus ring */
  --ml-shadow-focus-strong: 0px 0px 0px 3px var(--ml-color-alpha-magenta-14);
  --ml-shadow-dot-glow: 0px 0px 10px 0px var(--ml-color-alpha-magenta-80); /** Label dot glow on dark */
  --ml-shadow-success-ring: 0px 0px 0px 4px var(--ml-color-alpha-emerald-22);
  --ml-shadow-live-ring: 0px 0px 0px 3px var(--ml-color-alpha-emerald-25);
  --ml-shadow-avatar: 0px 4px 14px 0px var(--ml-color-alpha-black-15);
  --ml-shadow-logo-drop: 0px 6px 16px 0px var(--ml-color-alpha-black-35); /** drop-shadow() on product logos */
  --ml-transition-fast: var(--ml-motion-duration-fast) var(--ml-motion-easing-standard) 0ms;
  --ml-transition-base: var(--ml-motion-duration-base) var(--ml-motion-easing-standard) 0ms;
  --ml-transition-slow: var(--ml-motion-duration-slow) var(--ml-motion-easing-standard) 0ms;
  --ml-layout-gutter: var(--ml-space-8);
  --ml-layout-gutter-mobile: var(--ml-space-5);
  --ml-layout-section-y: var(--ml-space-24);
  --ml-layout-section-y-mobile: var(--ml-space-16);}

/* ---- Text styles (typography composites) ---- */
/* Home hero h1 (fluid in CSS: clamp(44px, 5.5vw, 68px)) */
.ml-type-display {
  font-family: var(--ml-font-family-display);
  font-size: var(--ml-font-size-68);
  font-weight: var(--ml-font-weight-bold);
  line-height: 1.03;
  letter-spacing: var(--ml-font-letter-spacing-tightest);
}

/* Page hero h1 (fluid: clamp(44px, 5.5vw, 60px)) */
.ml-type-hero {
  font-family: var(--ml-font-family-display);
  font-size: var(--ml-font-size-60);
  font-weight: var(--ml-font-weight-bold);
  line-height: var(--ml-font-line-height-tight);
  letter-spacing: var(--ml-font-letter-spacing-tighter);
}

/* CTA headline (fluid: clamp(32px, 4vw, 44px)) */
.ml-type-h1 {
  font-family: var(--ml-font-family-display);
  font-size: var(--ml-font-size-44);
  font-weight: var(--ml-font-weight-bold);
  line-height: 1.15;
  letter-spacing: var(--ml-font-letter-spacing-tight);
}

/* Section heading (fluid: clamp(32px, 3.5vw, 40px)) */
.ml-type-h2 {
  font-family: var(--ml-font-family-display);
  font-size: var(--ml-font-size-40);
  font-weight: var(--ml-font-weight-bold);
  line-height: 1.15;
  letter-spacing: var(--ml-font-letter-spacing-tight);
}

/* Sub-section heading (fluid: clamp(28px, 3vw, 36px)) */
.ml-type-h3 {
  font-family: var(--ml-font-family-display);
  font-size: var(--ml-font-size-36);
  font-weight: var(--ml-font-weight-bold);
  line-height: 1.2;
  letter-spacing: var(--ml-font-letter-spacing-snug);
}

.ml-type-card-title {
  font-family: var(--ml-font-family-display);
  font-size: var(--ml-font-size-24);
  font-weight: var(--ml-font-weight-bold);
  line-height: var(--ml-font-line-height-snug);
  letter-spacing: var(--ml-font-letter-spacing-normal);
}

/* Body-font headings inside cards */
.ml-type-title {
  font-family: var(--ml-font-family-body);
  font-size: var(--ml-font-size-18);
  font-weight: var(--ml-font-weight-semibold);
  line-height: var(--ml-font-line-height-snug);
  letter-spacing: var(--ml-font-letter-spacing-normal);
}

.ml-type-lead {
  font-family: var(--ml-font-family-body);
  font-size: var(--ml-font-size-20);
  font-weight: var(--ml-font-weight-regular);
  line-height: 1.65;
  letter-spacing: var(--ml-font-letter-spacing-normal);
}

.ml-type-body-lg {
  font-family: var(--ml-font-family-body);
  font-size: var(--ml-font-size-18);
  font-weight: var(--ml-font-weight-regular);
  line-height: var(--ml-font-line-height-normal);
  letter-spacing: var(--ml-font-letter-spacing-normal);
}

.ml-type-body {
  font-family: var(--ml-font-family-body);
  font-size: var(--ml-font-size-16);
  font-weight: var(--ml-font-weight-regular);
  line-height: var(--ml-font-line-height-normal);
  letter-spacing: var(--ml-font-letter-spacing-normal);
}

.ml-type-body-sm {
  font-family: var(--ml-font-family-body);
  font-size: var(--ml-font-size-15);
  font-weight: var(--ml-font-weight-regular);
  line-height: var(--ml-font-line-height-normal);
  letter-spacing: var(--ml-font-letter-spacing-normal);
}

.ml-type-caption {
  font-family: var(--ml-font-family-body);
  font-size: var(--ml-font-size-14);
  font-weight: var(--ml-font-weight-regular);
  line-height: 1.5;
  letter-spacing: var(--ml-font-letter-spacing-normal);
}

/* Section labels, product status, detail headings */
.ml-type-eyebrow {
  font-family: var(--ml-font-family-body);
  font-size: var(--ml-font-size-13);
  font-weight: var(--ml-font-weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--ml-font-letter-spacing-wider);
}

.ml-type-button {
  font-family: var(--ml-font-family-body);
  font-size: var(--ml-font-size-15);
  font-weight: var(--ml-font-weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--ml-font-letter-spacing-normal);
}

.ml-type-code {
  font-family: var(--ml-font-family-mono);
  font-size: var(--ml-font-size-14);
  font-weight: var(--ml-font-weight-regular);
  line-height: var(--ml-font-line-height-relaxed);
  letter-spacing: var(--ml-font-letter-spacing-normal);
}

.ml-type-wordmark {
  font-family: var(--ml-font-family-logo);
  font-size: var(--ml-font-size-24);
  font-weight: var(--ml-font-weight-bold);
  line-height: var(--ml-font-line-height-none);
  letter-spacing: 2px;
}

.ml-type-wordmark-sub {
  font-family: var(--ml-font-family-logo);
  font-size: 0.6rem;
  font-weight: var(--ml-font-weight-light);
  line-height: var(--ml-font-line-height-none);
  letter-spacing: var(--ml-font-letter-spacing-logo);
}