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

:root {
  --color-navy: #1F4A73;
  --color-navy-dark: #183a5c;
  --color-sage: #8AAFA8;
  --color-sage-dark: #739890;
  --color-graphite: #3F4954;
  --color-graphite-muted: #5a6570;
  --color-white: #ffffff;

  --color-bg-page: #FFFFFF;
  --color-bg-muted: #F6F8F9;
  --color-bg-accent: #F0F5F4;
  --color-surface: #FFFFFF;
  --color-border-subtle: rgba(31, 74, 115, 0.08);
  --color-border: rgba(31, 74, 115, 0.12);

  --color-ivory: var(--color-bg-muted);
  --color-accent-light: var(--color-bg-accent);
  --color-sage-pastel: #E8EFED;
  --color-sage-pastel-soft: #F0F5F4;
  --color-nav-panel-bg: rgba(255, 255, 255, 0.52);
  --color-nav-panel-border: rgba(138, 175, 168, 0.32);

  --color-logo-bg: #E3D5C8;
  --color-logo-bg-deep: #D9CAB9;
  --logo-texture-image: url("../images/logo-texture-tile.de1f5d6d07c9.png");
  --logo-texture-size: 256px 256px;
  --logo-surface-highlight: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.04) 38%,
    rgba(120, 100, 82, 0.05) 100%
  );
  --brand-logo-h-header: 2.75rem;
  --brand-logo-h-header-desktop: 3rem;
  --brand-logo-h-footer: 2.625rem;
  --brand-logo-h-footer-desktop: 2.875rem;
  --brand-logo-max-w-header: 10.5rem;
  --brand-logo-max-w-footer: 13rem;

  --color-header-bg: var(--color-logo-bg);
  --color-header-bg-scrolled: var(--color-logo-bg);
  --color-header-border: rgba(120, 100, 82, 0.14);
  --color-mobile-nav-bg: var(--color-logo-bg);

  --color-footer-bg: var(--color-logo-bg);
  --color-footer-text: var(--color-navy);
  --color-footer-muted: var(--color-graphite-muted);

  --font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --section-pad-y: clamp(3.5rem, 7vw, 6rem);
  --section-pad-x: clamp(1rem, 4vw, 2.5rem);

  --color-trust-strip-bg: #E8EFED;
  --color-cta-gradient: linear-gradient(115deg, #1F4A73 0%, #2c5d84 55%, #739890 130%);

  --shadow-btn-navy: 0 6px 18px rgba(31, 74, 115, 0.24);
  --shadow-btn-navy-hover: 0 10px 26px rgba(31, 74, 115, 0.32);

  --header-height: 60px;
  --header-height-desktop: 72px;

  --nav-panel-pad: 6px;
  --nav-panel-pad-desktop: 7px;
  --nav-link-gap: 0.25rem;
  --nav-link-gap-desktop: 0.3125rem;
  --bottom-cta-height: calc(44px + var(--space-sm) * 2);
  --container-max: 87.5rem;
  --content-max: 45rem;

  --shadow-header: 0 1px 0 rgba(31, 74, 115, 0.04), 0 2px 12px rgba(31, 74, 115, 0.06);
  --shadow-header-scrolled: 0 1px 0 rgba(31, 74, 115, 0.06), 0 8px 24px rgba(31, 74, 115, 0.1);
  --shadow-nav-panel: 0 4px 20px rgba(31, 74, 115, 0.08), 0 0 0 1px var(--color-border-subtle);
  --shadow-nav-pill: 0 2px 8px rgba(31, 74, 115, 0.1);

  --shadow-soft: 0 4px 20px rgba(31, 74, 115, 0.07);
  --shadow-card: 0 8px 32px rgba(31, 74, 115, 0.1);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-fast: 160ms;
  --duration-ui: 200ms;
  --duration-modal: 300ms;
}