/* ==================================================
   BRAND TOKENS — derived from the institutional mark
   ================================================== */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --color-primary: #071f3d;
  --color-secondary: #124e78;
  --color-accent: #1769e0;
  --color-accent-bright: #19b9c5;
  --color-background: #f4f8fb;
  --color-surface: #ffffff;
  --color-text: #102438;
  --color-text-muted: #5a6f80;
  --color-border: #d7e2e9;
  --color-success: #267a63;
  --color-sand: #d8b56a;
  --color-ink-inverse: #f8fbfd;

  --font-display: "Outfit", "Trebuchet MS", sans-serif;
  --font-body: "DM Sans", Arial, sans-serif;

  --space-xs: 0.5rem;
  --space-sm: 0.875rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;
  --space-2xl: clamp(4.5rem, 9vw, 8.5rem);

  --radius-sm: 0.35rem;
  --radius-md: 0.8rem;
  --radius-lg: 1.25rem;
  --shadow-soft: 0 1.2rem 3rem rgba(7, 31, 61, 0.10);
  --shadow-lift: 0 1.5rem 3.5rem rgba(7, 31, 61, 0.16);
  --max-width: 78rem;
  --header-height: 5rem;
  --transition: 220ms cubic-bezier(.2, .7, .2, 1);
  --z-header: 100;
  --z-modal: 300;
}

body {
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  color: var(--color-primary);
  font-family: var(--font-display);
  line-height: 1.05;
  text-wrap: balance;
}

h1 { font-size: clamp(2.7rem, 8vw, 6.7rem); font-weight: 800; letter-spacing: -0.055em; }
h2 { font-size: clamp(2.15rem, 5.5vw, 4.5rem); font-weight: 700; letter-spacing: -0.045em; }
h3 { font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 600; letter-spacing: -0.025em; }
p { max-width: 68ch; }

::selection { background: var(--color-accent-bright); color: var(--color-primary); }