:root {
  /* Brand colors */
  --yd-color-primary: #059bbe;
  --yd-color-primary-dark: #047a96;
  --yd-color-primary-soft: #e6f7fb;
  --yd-color-secondary: #0d1117;
  --yd-color-secondary-soft: #171d26;
  --yd-color-accent: #2eab65;
  --yd-color-accent-soft: #eaf7f0;
  --yd-color-accent-strong: #207948;
  --yd-color-success: #2eab65;
  --yd-color-warning: #f6b73c;
  --yd-color-danger: #c8353d;
  --yd-color-white: #ffffff;
  --yd-color-black: #050608;
  --yd-color-gray-50: #f8f9fb;
  --yd-color-gray-100: #f0f2f5;
  --yd-color-gray-200: #e2e6eb;
  --yd-color-gray-300: #cbd1d9;
  --yd-color-gray-500: #69717d;
  --yd-color-gray-700: #343b45;
  --yd-color-gray-900: #11151b;
  --yd-color-body: #454c56;
  --yd-color-heading: #101319;
  --yd-color-link: #047a96;
  --yd-color-link-hover: #035f75;
  --yd-gradient-hero: linear-gradient(135deg, #041013 0%, #10222a 58%, #043140 100%);
  --yd-gradient-brand: linear-gradient(135deg, #059bbe 0%, #2eab65 100%);
  --yd-gradient-brand-hover: linear-gradient(135deg, #059bbe 0%, #2eab65 45%, #047a96 100%);
  --yd-gradient-soft: linear-gradient(145deg, #ffffff 0%, #f2f4f7 100%);
  --yd-color-transparent: transparent;
  --yd-color-white-94: rgba(255, 255, 255, 0.94);
  --yd-color-white-50: rgba(255, 255, 255, 0.5);
  --yd-color-white-15: rgba(255, 255, 255, 0.15);
  --yd-color-white-14: rgba(255, 255, 255, 0.14);
  --yd-color-white-12: rgba(255, 255, 255, 0.12);
  --yd-color-white-22: rgba(255, 255, 255, 0.22);
  --yd-color-white-35: rgba(255, 255, 255, 0.35);
  --yd-color-white-70: rgba(255, 255, 255, 0.7);
  --yd-color-accent-glow: rgba(5, 155, 190, 0.2);
  --yd-color-dark-overlay: rgba(5, 6, 8, 0.9);

  /* Typography */
  --yd-font-heading: "Lexend", "Segoe UI", Arial, sans-serif;
  --yd-font-body: "Figtree", "Segoe UI", Arial, sans-serif;
  --yd-font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;
  --yd-fw-regular: 400;
  --yd-fw-medium: 500;
  --yd-fw-semibold: 600;
  --yd-fw-bold: 700;
  --yd-fs-xs: 0.75rem;
  --yd-fs-sm: 0.875rem;
  --yd-fs-base: 1rem;
  --yd-fs-lead: clamp(1.05rem, 1.25vw, 1.2rem);
  --yd-fs-h6: 1rem;
  --yd-fs-h5: 1.2rem;
  --yd-fs-h4: clamp(1.25rem, 1.5vw, 1.5rem);
  --yd-fs-h3: clamp(1.65rem, 2.2vw, 2.15rem);
  --yd-fs-h2: clamp(2rem, 3.1vw, 3.25rem);
  --yd-fs-h1: clamp(3rem, 5vw, 5.15rem);

  /* Spacing */
  --yd-space-2xs: 0.25rem;
  --yd-space-xs: 0.5rem;
  --yd-space-sm: 0.75rem;
  --yd-space-md: 1rem;
  --yd-space-lg: 1.5rem;
  --yd-space-xl: 2rem;
  --yd-space-2xl: 3rem;
  --yd-space-3xl: 4rem;
  --yd-space-4xl: 5.5rem;

  /* Shape and depth */
  --yd-radius-sm: 0.5rem;
  --yd-radius-md: 0.85rem;
  --yd-radius-card: 1.25rem;
  --yd-radius-lg: 2rem;
  --yd-radius-pill: 999px;
  --yd-shadow-subtle: 0 1px 2px rgba(8, 12, 18, 0.08);
  --yd-shadow-card: 0 18px 50px rgba(8, 12, 18, 0.09);
  --yd-shadow-elevated: 0 30px 80px rgba(4, 7, 12, 0.2);
  --yd-shadow-brand: 0 10px 30px rgba(5, 155, 190, 0.24);
  --yd-shadow-product: 0 2.5rem 4rem rgba(0, 0, 0, 0.42);
  --yd-shadow-glass: 0 12px 34px rgba(0, 0, 0, 0.2);
  --yd-shadow-flagship: 0 24px 65px rgba(5, 155, 190, 0.18);
  --yd-transition-fast: 160ms;
  --yd-transition-default: 280ms;
  --yd-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --yd-container: 82rem;
}