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

:root {
  --color-main: #00387B;
  --color-main-dark: #001a3d;
  --color-main-deep: #002a5c;
  --color-main-soft: #2f67a7;
  --color-main-pale: #e7eef7;
  --color-main-rgb: 0, 56, 123;

  --color-ink: #05070a;
  --color-graphite: #10151d;
  --color-graphite-2: #1c2430;
  --color-paper: #f7f8fb;
  --color-white: #ffffff;
  --color-stone: #dce2ea;
  --color-muted: #7d8794;
  --color-line: rgba(255, 255, 255, 0.14);
  --color-line-dark: rgba(5, 7, 10, 0.12);
  --color-focus: var(--color-main-soft);

  --font-primary: "Montserrat", "Inter", "Segoe UI", Arial, sans-serif;
  --font-secondary: "Montserrat", "Inter", "Segoe UI", Arial, sans-serif;
  --font-body: var(--font-primary);
  --font-display: var(--font-secondary);

  --image-hero: url("../assets/images/backgrounds/sfa-urban-towers.webp");
  --image-page-hero: url("../assets/images/backgrounds/sfa-urban-towers.webp");

  --container: 1180px;
  --container-wide: 1380px;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 18px;

  --shadow-soft: 0 24px 80px rgba(0, 20, 52, 0.28);
  --shadow-sharp: 0 12px 40px rgba(0, 20, 52, 0.2);

  --transition: 180ms ease;
  --transition-slow: 520ms cubic-bezier(0.22, 1, 0.36, 1);
}