:root {
  --color-primary: #003d4c;

  --color-secondary: #306171;

  --color-tertiary: #588899;

  --color-accent-yellow: #ffc56e;

  --color-accent-yellow-hover: #ffc280;
  --color-accent-yellow-light: #ffd9a2;
  --color-accent-rose: #ecc3b2;
  --color-accent-rose-hover: #daae9b;

  --color-accent-rose-light: #f2d5c7;
  --color-accent-purple: #b4b5df;

  --color-accent-green: #9caf88;
  --color-accent-green-light: #b4cdaf;

  --color-white: #ffffff;
  --color-bg-secondary: #f9fafb;

  --color-bg-tertiary: #f2f2f3;

  --color-text-primary: #313335;
  --color-text-secondary: #242525;
  --color-text-tertiary: #707274;
  --color-text-quaternary: #858789;
  --color-placeholder: #afb1b3;
  --color-border-primary: #d0d3d4;
  --color-border-secondary: #e2e2e3;
  --color-footer-secondary: #5b5d5f;

  --color-success: #17b26a;
  --color-error: #ff5c47;

  --color-lazy-placeholder: #0000001a;
  --color-avatar-border: rgba(0, 0, 0, 0.08);
  --color-nav-bg: #ffffff80;

  --color-glass-light: rgba(255, 255, 255, 0.35);
  --color-glass-medium: rgba(255, 255, 255, 0.5);
  --color-glass-strong: rgba(255, 255, 255, 0.85);
  --color-social-bg: #ffffff29;

  --color-reviews-bg: #ffffffb3;

  --color-overlay-primary: #003d4cd9;

  --color-overlay-yellow: #ffc56ed9;
  --color-overlay-purple: #b4b5dfd9;
  --color-overlay-green: #9caf88d9;
  --color-overlay-rose: #ecc3b2eb;

  --color-hover-primary: #003d4c1a;

  --color-focus-primary: #003d4c3d;

  --color-focus-ring: #98a2b324;
  --color-tertiary-btn-hover: #d3e6e5;

  --font-family: "Montserrat", sans-serif;

  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --display-2xl: 4.5rem;

  --display-xl: 3.75rem;

  --display-lg: 3rem;

  --display-md: 2.25rem;

  --display-sm: 1.75rem;

  --display-xs: 1.5rem;

  --h1-size: 3.75rem;

  --h2-size: 3rem;

  --h3-size: 1.5rem;

  --h4-size: 1.25rem;

  --text-xl: 1.25rem;

  --text-lg: 1.125rem;

  --text-md: 1rem;

  --text-sm: 0.875rem;

  --text-xs: 0.75rem;

  --leading-tight: 120%;
  --leading-snug: 125%;
  --leading-normal: 150%;
  --leading-relaxed: 133.333%;

  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-28: 112px;

  --section-padding: 80px;
  --section-padding-mobile: 32px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;
  --radius-hero: 40px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px #1018280d;
  --shadow-md: 0 12px 16px -4px #10182814, 0 4px 6px -2px #10182808;
  --shadow-lg: 0 24px 48px -12px #0f172a59, 0 0 0 1px #0f172a0a;
  --shadow-xl: 0 20px 40px -12px #0f172a33, 0 8px 16px -8px #0f172a1f;
  --shadow-2xl: 0 32px 64px -20px #0f172a45, 0 12px 24px -12px #0f172a24;
  --shadow-dropdown: 0 8px 24px #1018281f;

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-decorative: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  --blur-sm: blur(4px);
  --blur-md: blur(8px);
  --blur-lg: blur(12px);
  --blur-xl: blur(24px);

  --container-max: 1280px;
  --container-padding: 20px;

  --z-negative: -1;
  --z-base: 1;
  --z-controls: 2;
  --z-offcanvas: 9999;
  --z-header: 10000;
  --z-submenu: 10001;
  --z-modal: 99999;

  --margin-top-md: 1em;
}

@media (max-width: 991px) {
  :root {
    --h1-size: 2rem;

    --h2-size: 1.75rem;

    --h3-size: 1.5rem;

    --h4-size: 1.375rem;

    --display-2xl: 3rem;

    --display-xl: 3rem;

    --display-lg: 1.625rem;

    --display-md: 1.5rem;

    --text-xl: 1.125rem;

    --text-lg: 1rem;

    --section-padding: min(80px, calc(20px + 10vw));

    --section-padding-mobile: min(80px, calc(20px + 6vw));

  }
}

@media (max-width: 540px) {
  :root {
    --h1-size: 1.8rem;

    --h2-size: 1.6rem;

    --h3-size: 1.4rem;

    --h4-size: 1.275rem;

    --display-2xl: 2.5rem;

    --display-xl: 2.5rem;

    --display-lg: 1.5rem;

    --display-md: 1.35rem;

    --text-xl: 1rem;

    --text-lg: 0.9rem;

    --section-padding: 40px;
  }
}