:root {
  --ayberk-color-ink: #071426;
  --ayberk-color-navy: #062e68;
  --ayberk-color-muted: #5f6f82;
  --ayberk-color-primary: #0867e8;
  --ayberk-color-primary-hover: #0756bf;
  --ayberk-color-cyan: #29a8ff;
  --ayberk-color-surface: #ffffff;
  --ayberk-color-panel: #f5f6f8;
  --ayberk-color-line: #dfe5ec;
  --ayberk-color-line-strong: #c9d3df;
  --ayberk-color-success: #149b67;
  --ayberk-color-footer: #07111f;
  --ayberk-color-footer-muted: #94a3b8;

  --ayberk-font-sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --ayberk-font-size-xs: 0.75rem;
  --ayberk-font-size-sm: 0.875rem;
  --ayberk-font-size-base: 1rem;
  --ayberk-font-size-lead: clamp(1rem, 1.25vw, 1.16rem);
  --ayberk-font-size-h3: clamp(1.25rem, 1.6vw, 1.375rem);
  --ayberk-font-size-h2: clamp(2.1rem, 3.3vw, 3.25rem);
  --ayberk-font-size-h1: clamp(2.55rem, 4vw, 4rem);
  --ayberk-font-size-display: clamp(2.8rem, 4.45vw, 4.75rem);

  --ayberk-leading-tight: 1.02;
  --ayberk-leading-heading: 1.08;
  --ayberk-leading-body: 1.6875;
  --ayberk-leading-lead: 1.75;

  --ayberk-space-1: 0.25rem;
  --ayberk-space-2: 0.5rem;
  --ayberk-space-3: 0.75rem;
  --ayberk-space-4: 1rem;
  --ayberk-space-5: 1.25rem;
  --ayberk-space-6: 1.5rem;
  --ayberk-space-8: 2rem;
  --ayberk-space-10: 2.5rem;
  --ayberk-space-12: 3rem;
  --ayberk-space-16: 4rem;
  --ayberk-space-20: 5rem;
  --ayberk-section-space: 7.75rem;

  --ayberk-container: 88.75rem;
  --ayberk-gutter: 2rem;
  --ayberk-header-height: 4.5rem;
  --ayberk-control-height: 3.25rem;
  --ayberk-button-height: 3.125rem;

  --ayberk-radius-sm: 0.5rem;
  --ayberk-radius-md: 0.625rem;
  --ayberk-radius-lg: 1rem;
  --ayberk-radius-xl: 1.25rem;
  --ayberk-radius-round: 999px;

  --ayberk-shadow-card: 0 18px 50px rgba(18, 45, 76, 0.1);
  --ayberk-shadow-menu: 0 18px 45px rgba(15, 23, 42, 0.14);
  --ayberk-shadow-primary: 0 10px 26px rgba(8, 103, 232, 0.18);
  --ayberk-shadow-floating: 0 20px 55px rgba(15, 35, 58, 0.2);

  --ayberk-duration-fast: 180ms;
  --ayberk-duration-base: 220ms;
  --ayberk-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ayberk-focus: 0 0 0 3px rgba(41, 168, 255, 0.45);
}

@media (max-width: 980px) {
  :root {
    --ayberk-gutter: 1.5rem;
    --ayberk-section-space: 5.75rem;
  }
}

@media (max-width: 640px) {
  :root {
    --ayberk-gutter: 1.25rem;
    --ayberk-section-space: 4.375rem;
  }
}