@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  --color-bg-topbar: #FFFFFF1A;
  --color-bg-nav: #101820;
  --color-bg-footer: #101820;
  --color-text: #ffffff;
  --color-text-muted: #9aa3b2;
  --color-text-muted-hover: #ffffff;
  --color-divider: rgba(255, 255, 255, 0.12);
  --color-accent: #c9a063;
  --color-accent-light: #f4e4c8;
  --color-focus: #e8c98a;

  --font-main: "Montserrat", "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-cofo: "CoFo Sans", "Montserrat", "Manrope", "Helvetica Neue", Arial, sans-serif;
  --fs-topbar: 16px;
  --fs-nav: 14px;
  --fs-logo: 20px;
  --fs-tagline: 15px;

  /* Layout */
  --header-topbar-height: 55px;
  --header-nav-height: 86px;
  --container-max: 1660px;
  --container-pad: 24px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.18s var(--ease);
  --transition-base: 0.28s var(--ease);

  /* Z-index */
  --z-header: 1000;
  --z-dropdown: 1010;
  --z-mobile-panel: 1020;
}

@media (max-width: 992px) {
  :root {
    --header-nav-height: 64px;
  }
}