:root {
  /* Colors */
  --color-text: #2b2b2b;
  --color-text-rgb: 43, 43, 43;
  --color-text-strong: #222222;
  --color-text-muted: #6f6f6f;
  --color-selection: #dbe7ec;
  --color-hover: #6f6f6f;
  --color-focus: #222222;
  --color-bg: #f5f5f5;
  --color-bg-page: #ffffff;
  --color-card-body: rgba(245, 245, 245, 0.5);
  --color-surface-warm: #efebe2;
  --color-surface-control: #e9e9dd;
  --color-surface-highlight: linear-gradient(
  to right,
  rgba(188, 188, 188, 0.35) 0%,
  /* rgba(223, 190, 149, 0.35) 25%, */
  rgba(255, 243, 135, 0.3) 100%
);
  --color-border-light: #c5c5c5;
  --color-border-warm: #c7b6a1;
  --color-border-dark: #2b2b2b;
  --color-accent-start: #0a2d4a;
  --color-accent-end: #090999;
  --color-error: #c0392b;

  /* Shadows */
  --shadow-sm: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 12px 30px rgba(43, 43, 43, 0.15);
  --shadow-lg: 0 15px 40px rgba(43, 43, 43, 0.2);
  --shadow-neumorphic: -8px -6px 16px #ffffff, 8px 8px 16px #c9d9e8;
  --shadow-section: -8px 0 16px #c9d9e8;

  /* Font sizes */
  --fs-title: clamp(28px, calc(21px + 1.9vw), 48px); /* h1 */
  --fs-display-title: clamp(28px, 3.2vw, 54px); /* display h1 */
  --fs-process-num: clamp(28px, 4vw, 40px);
  --fs-section: clamp(24px, calc(20px + 1.4vw), 42px); /* h2 */
  --fs-subtitle: clamp(24px, calc(22px + 0.55vw), 30px); /* h2 */
  --fs-menu-overlay: clamp(22px, 5vw, 32px);
  --fs-heading: clamp(18px, calc(15px + 1vw), 28px); /* h3 */
  --fs-price: clamp(18px, 2.5vw, 24px);
  --fs-card: clamp(16px, 2vw, 24px);
  --fs-card-title: clamp(15px, calc(17px + 0.7vw), 22px);
  --fs-hero-text: clamp(15px, calc(14px + 0.28vw), 18px);
  --fs-process-title: clamp(14px, 2vw, 20px);
  --fs-base: clamp(16px, 2vw, 20px); /* body */
  --fs-small: clamp(13px, 1.5vw, 15px); /* nav, footer */

  /* Spacing */
  --gap-card: clamp(16px, 2vw, 30px);
  --gap-section: clamp(20px, 3vw, 55px);
  --gap-menu: clamp(20px, 3vw, 40px);
  --gap-menu-overlay: clamp(20px, 4vh, 36px);
  --section-py: clamp(24px, 4vw, 80px);
  --content-inline-start: 12px;
  --gap-menu-overlay-bottom: clamp(30px, 8vh, 40px);

  /* Transitions */
  --transition-base: 0.3s ease;
  --transition-link: color 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);

  /* Logo */

  /* Hero padding */
  --hero-pt: clamp(60px, 10vh, 130px);

  /* Request section padding */

  /* Footer spacing */
  --footer-gap-copy: clamp(4px, 1vw, 8px);
  --footer-gap-contacts: clamp(6px, 2vw, 12px);
  --footer-gap-vertical: clamp(8px, 2.5vw, 20px);
  --footer-gap-social: clamp(12px, 3vw, 24px);
  --footer-gap-items: clamp(16px, 4vw, 32px);
  --footer-padding-x: clamp(16px, 5vw, 40px);

  /* Cookie banner */
  --cookie-banner-padding-y: clamp(16px, 2.5vw, 28px);
  --cookie-banner-shadow: 0 -4px 20px rgba(43, 43, 43, 0.1);
  --cookie-banner-inner-max: 1320px;
  --cookie-banner-inner-px: clamp(16px, 4vw, 40px);

  /* Cookie button */
  --cookie-btn-padding: 10px 8px;

  /* Cookie toggle */
  --cookie-toggle-padding: 10px 0;

  --cookie-toggle-gap: 1.5rem;

  --cookie-toggle-width: 44px;
  --cookie-toggle-height: 24px;

  --cookie-toggle-knob: 16px;
  --cookie-toggle-knob-offset: 3px;
}

@media (min-width: 1200px) {
  :root {
    --content-inline-start: clamp(20px, 6.9vw, 100px);
  }
}