/* Location: D:\ironcore\frontend\vibe_beauti\assets\css\themes\vibe-beauti.css */
:root {
  color-scheme: light;

  --page-bg: #edf2e7;
  --page-overflow-x: hidden;
  --page-overflow-y: hidden;

  /* Background */
  --bg-image: url("../images/fon_vibe_beauti1.png");
  --bg-position-x: center;
  --bg-position-y: top;
  --bg-size: cover;
  --bg-repeat: no-repeat;
  --bg-opacity: 1;
  --bg-filter: none;

  --page-overlay: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.03) 34%,
    rgba(255, 255, 255, 0.01) 100%
  );

  --focus-outline-color: rgba(112, 186, 176, 0.42);

  /* Topbar */
  --topbar-left: 0;
  --topbar-top: 0;
  --topbar-right: 0;
  --topbar-height: clamp(36px, 4.2vh, 44px);
  --topbar-padding-x: clamp(10px, 1.2vw, 18px);
  --topbar-padding-y: clamp(4px, 0.45vw, 6px);
  --topbar-content-max-width: 1440px;
  --topbar-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.34) 0%,
    rgba(223, 243, 237, 0.22) 100%
  );
  --topbar-border: rgba(132, 180, 166, 0.12);
  --topbar-shadow: 0 4px 12px rgba(91, 120, 110, 0.05);
  --topbar-blur: 8px;
  --topbar-highlight: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );

  /* Topbar nav */
  --topbar-nav-gap: 8px;
  --topbar-nav-gap-mobile: 6px;

  --topbar-nav-link-height: 26px;
  --topbar-nav-link-padding-y: 4px;
  --topbar-nav-link-padding-x: 14px;
  --topbar-nav-link-radius: 999px;
  --topbar-nav-link-border: rgba(139, 188, 176, 0.16);
  --topbar-nav-link-bg: rgba(255, 255, 255, 0.3);
  --topbar-nav-link-color: #547872;
  --topbar-nav-link-font-size: 0.74rem;
  --topbar-nav-link-font-weight: 600;
  --topbar-nav-link-letter-spacing: 0.04em;
  --topbar-nav-link-shadow: 0 3px 8px rgba(110, 147, 136, 0.04);
  --topbar-nav-link-blur: 5px;

  --topbar-nav-link-hover-bg: rgba(255, 255, 255, 0.48);
  --topbar-nav-link-hover-border: rgba(117, 182, 169, 0.24);
  --topbar-nav-link-hover-color: #426863;
  --topbar-nav-link-hover-shadow: 0 4px 10px rgba(105, 143, 132, 0.06);

  --topbar-nav-link-active-bg: rgba(205, 236, 228, 0.5);
  --topbar-nav-link-active-border: rgba(107, 174, 161, 0.22);
  --topbar-nav-link-active-color: #355c56;
  --topbar-nav-link-active-shadow: 0 4px 10px rgba(95, 134, 123, 0.06);

  --topbar-nav-link-height-mobile: 24px;
  --topbar-nav-link-padding-y-mobile: 4px;
  --topbar-nav-link-padding-x-mobile: 10px;
  --topbar-nav-link-font-size-mobile: 0.7rem;

  /* Language switcher */
  --lang-switcher-top: 6px;
  --lang-switcher-right: 10px;

  --lang-trigger-height: 30px;
  --lang-trigger-padding-x: 10px;
  --lang-trigger-padding-y: 5px;
  --lang-trigger-gap: 7px;
  --lang-trigger-radius: 999px;
  --lang-trigger-bg: rgba(255, 255, 255, 0.54);
  --lang-trigger-border: rgba(139, 188, 176, 0.24);
  --lang-trigger-shadow: 0 6px 14px rgba(101, 139, 129, 0.08);
  --lang-trigger-hover-bg: rgba(255, 255, 255, 0.7);
  --lang-trigger-code-font-size: 0.74rem;
  --lang-trigger-code-font-weight: 700;
  --lang-trigger-code-letter-spacing: 0.06em;
  --lang-trigger-code-color: #466863;
  --lang-trigger-icon-size: 8px;
  --lang-trigger-icon-color: #6aa79b;

  --lang-menu-top: 6px;
  --lang-menu-width: 166px;
  --lang-menu-padding: 8px;
  --lang-menu-radius: 18px;
  --lang-menu-bg: rgba(255, 255, 255, 0.84);
  --lang-menu-border: rgba(137, 186, 173, 0.24);
  --lang-menu-shadow: 0 18px 34px rgba(93, 130, 120, 0.14);
  --lang-menu-blur: 12px;
  --lang-menu-gap: 6px;

  --lang-option-height: 38px;
  --lang-option-padding-x: 10px;
  --lang-option-gap: 10px;
  --lang-option-radius: 12px;
  --lang-option-font-size: 0.88rem;
  --lang-option-font-weight: 600;
  --lang-option-letter-spacing: 0.02em;
  --lang-option-color: #466863;
  --lang-option-hover-bg: rgba(222, 242, 236, 0.7);
  --lang-option-active-bg: rgba(207, 235, 228, 0.88);
  --lang-option-active-border: rgba(107, 174, 161, 0.28);

  --lang-flag-width: 20px;
  --lang-flag-height: 14px;
  --lang-flag-radius: 4px;
  --lang-flag-border: rgba(255, 255, 255, 0.4);
  --lang-flag-shadow: 0 0 0 1px rgba(105, 139, 129, 0.08);

  /* Home */
  --home-hero-padding-top: clamp(52px, 6vh, 70px);
  --home-hero-padding-right: 0;
  --home-hero-padding-bottom: 0;
  --home-hero-padding-left: 0;

  --home-hero-tablet-padding-top: 48px;
  --home-hero-tablet-padding-right: 0;
  --home-hero-tablet-padding-bottom: 0;
  --home-hero-tablet-padding-left: 0;

  --home-hero-mobile-padding-top: 44px;
  --home-hero-mobile-padding-right: 0;
  --home-hero-mobile-padding-bottom: 0;
  --home-hero-mobile-padding-left: 0;

  /* Gallery */
  --gallery-hero-padding-top: clamp(72px, 8vh, 96px);
  --gallery-hero-panel-width: 760px;
  --gallery-hero-panel-padding-x: 24px;
  --gallery-hero-panel-padding-y: 24px;
  --gallery-hero-panel-radius: 28px;
  --gallery-hero-panel-border: rgba(255, 255, 255, 0.28);
  --gallery-hero-panel-bg: rgba(255, 255, 255, 0.3);
  --gallery-hero-panel-shadow: 0 18px 40px rgba(112, 145, 134, 0.1);
  --gallery-hero-panel-blur: 12px;
  --gallery-hero-eyebrow-color: #67978e;
  --gallery-hero-title-color: #4f716c;
  --gallery-hero-text-color: #5f7d77;
}

@media (max-width: 1200px) {
  :root {
    --bg-position-x: center;
    --bg-position-y: top;
    --bg-size: cover;
  }
}

@media (max-width: 900px) {
  :root {
    --bg-position-x: center;
    --bg-position-y: top;
    --bg-size: cover;
  }
}

@media (max-width: 700px) {
  :root {
    --page-overflow-y: auto;

    --bg-position-x: center;
    --bg-position-y: top;
    --bg-size: cover;

    --lang-switcher-top: 4px;
    --lang-switcher-right: 8px;

    --lang-trigger-height: 28px;
    --lang-trigger-padding-x: 8px;
    --lang-trigger-padding-y: 4px;
    --lang-trigger-code-font-size: 0.68rem;

    --lang-menu-width: 154px;
    --lang-option-height: 36px;
    --lang-option-font-size: 0.82rem;

    --lang-flag-width: 18px;
    --lang-flag-height: 13px;
  }
}