:root {
  --yes-color-brand: #49c5b1;
  --yes-color-brand-hover: #3eb6a3;
  --yes-color-accent: #49c5b1;
  --yes-color-secondary-dark: #2a2b2d;
  --yes-color-bg-dark: #0d0f10;
  --yes-color-bg-light: #ffffff;
  --yes-color-surface-dark: #17191a;
  --yes-color-surface-light: #ffffff;
  --yes-color-surface-soft: #f8f9fa;
  --yes-color-border-subtle: rgba(78, 85, 94, 0.18);
  --yes-color-text-primary: #111213;
  --yes-color-text-secondary: #4e555e;
  --yes-color-text-muted: #6d747c;
  --yes-color-success: #49c5b1;
  --yes-color-warning: #d6a34a;
  --yes-color-error: #c85d5d;

  --yes-color-primary: var(--yes-color-brand);
  --yes-color-primary-hover: var(--yes-color-brand-hover);
  --yes-color-primary-text: #111213;
  --yes-color-secondary-border: var(--yes-color-brand);
  --yes-color-secondary-text: var(--yes-color-brand);
  --yes-color-disabled-bg: #8a8a8f;
  --yes-color-disabled-text: #111213;

  --yes-font-heading: "Orbitron", "Roboto", Arial, sans-serif;
  --yes-font-body: "Roboto", Arial, sans-serif;
  --yes-font-technical: "Orbitron", "Roboto", Arial, sans-serif;

  --yes-text-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --yes-text-h6: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --yes-text-h5: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --yes-text-h4: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem);
  --yes-text-h3: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem);
  --yes-text-h2: clamp(2.25rem, 1.65rem + 2.4vw, 4rem);
  --yes-text-h1: clamp(3rem, 2rem + 4vw, 6rem);
  --yes-text-display: clamp(3.5rem, 2rem + 7vw, 8rem);
  --yes-text-small: 0.92rem;
  --yes-text-label: 0.75rem;
  --yes-text-button: 1rem;

  --yes-leading-body: 1.6;
  --yes-leading-h1: 1;
  --yes-leading-h2: 1.08;
  --yes-leading-h3: 1.14;
  --yes-leading-h4: 1.22;
  --yes-leading-h5: 1.26;
  --yes-leading-h6: 1.3;

  --yes-tracking-heading: 0;
  --yes-tracking-heading-uppercase: 0.03em;
  --yes-heading-max: 14ch;
  --yes-heading-max-wide: 18ch;
  --yes-heading-space-sm: 16px;
  --yes-heading-space-md: 24px;
  --yes-heading-space-lg: 32px;

  --yes-space-xs: 8px;
  --yes-space-sm: 16px;
  --yes-space-md: 24px;
  --yes-space-lg: 32px;
  --yes-space-xl: 48px;
  --yes-space-2xl: 64px;
  --yes-space-3xl: 96px;
  --yes-space-4xl: 120px;

  --yes-radius-sm: 2px;
  --yes-radius-md: 4px;

  --yes-button-height: 56px;
  --yes-button-padding-x: 32px;
  --yes-button-padding-y: 14px;
  --yes-button-radius: 2px;
  --yes-button-font-size: 1rem;
  --yes-button-font-weight: 700;
  --yes-button-border-width: 2px;
  --yes-button-transition: 0.2s ease;

  --yes-icon-size-16: 16px;
  --yes-icon-size-24: 24px;
  --yes-icon-size-32: 32px;
  --yes-icon-size-40: 40px;
  --yes-icon-size-48: 48px;
  --yes-icon-size-56: 56px;
  --yes-icon-size-64: 64px;
  --yes-icon-size-72: 72px;
  --yes-icon-stroke-width: 1.9;
  --yes-icon-color: var(--yes-color-accent);

  --yes-shadow-card: 0 20px 40px rgba(17, 18, 19, 0.08);
  --yes-shadow-card-hover: 5px 5px 0 var(--yes-color-brand);
  --yes-shadow-panel: 14px 14px 0 rgba(73, 197, 177, 0.16);

  --yes-break-mobile: 480px;
  --yes-break-tablet: 782px;
  --yes-break-desktop: 1024px;
  --yes-break-wide: 1440px;

  --yes-container-max: 1240px;
  --yes-container-wide-max: 1280px;
  --yes-container-narrow-max: 880px;
  --yes-hero-container-max: 1440px;
  --yes-reading-max: 900px;
  --yes-page-padding-x: 48px;
  --yes-page-gutter: clamp(24px, 5vw, 96px);
  --yes-hero-column-gap: clamp(48px, 6vw, 96px);
  --yes-hero-title-max: 760px;
  --yes-hero-visual-max: 680px;
  --yes-section-padding-y: 96px;
  --yes-header-offset: 96px;
  --yes-hero-padding-top: calc(var(--yes-header-offset) + 64px);
}

html.dark {
  --yes-color-bg-dark: #0d0f10;
  --yes-color-bg-light: #111213;
  --yes-color-surface-dark: #17191a;
  --yes-color-surface-light: #17191a;
  --yes-color-surface-soft: #121617;
  --yes-color-border-subtle: rgba(255, 255, 255, 0.12);
  --yes-color-text-primary: #f3f7f7;
  --yes-color-text-secondary: rgba(243, 247, 247, 0.78);
  --yes-color-text-muted: rgba(243, 247, 247, 0.58);
  --yes-shadow-card: 0 20px 40px rgba(0, 0, 0, 0.24);
  --yes-shadow-panel: 14px 14px 0 rgba(73, 197, 177, 0.22);
}

@media (max-width: 1024px) {
  :root {
    --yes-header-offset: 88px;
    --yes-page-padding-x: 32px;
    --yes-page-gutter: clamp(24px, 4vw, 48px);
    --yes-section-padding-y: 80px;
    --yes-hero-padding-top: calc(var(--yes-header-offset) + 56px);
  }
}

@media (max-width: 782px) {
  :root {
    --yes-header-offset: 78px;
    --yes-page-padding-x: 20px;
    --yes-page-gutter: 24px;
    --yes-section-padding-y: 64px;
    --yes-hero-padding-top: calc(var(--yes-header-offset) + 48px);
  }
}