@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-latin-500.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-latin-600.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-latin-700.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/roboto-latin-var.woff2") format("woff2");
}

:root {
  /* Brand colors, taken from the CV */
  --navy: #001430;
  --slate: #455368;
  --blue: #236bb3;
  --blue-light: #7fb2e5;
  --text-on-dark: #e8ecf2;
  --muted-on-dark: #c9d2de;
  --ink: #22252b;
  --mute: #4f4f4f;
  --light-bg: #f9fafb;
  --line: #dfe4ea;

  /* Derived shades, mixed only from the brand colors above */
  --navy-deep: color-mix(in srgb, var(--navy) 80%, black);
  --navy-raised: color-mix(in srgb, var(--navy) 88%, var(--slate));
  --navy-raised-hover: color-mix(in srgb, var(--navy) 78%, var(--slate));
  --line-on-dark: color-mix(in srgb, var(--navy) 65%, var(--slate));
  --blue-hover: color-mix(in srgb, var(--blue) 85%, var(--blue-light));
  --blue-tint: color-mix(in srgb, var(--blue) 18%, transparent);
  --header-bg: color-mix(in srgb, var(--navy) 88%, transparent);
  --field-border: color-mix(in srgb, var(--slate) 55%, var(--muted-on-dark));
  --field-placeholder: color-mix(in srgb, var(--muted-on-dark) 70%, var(--navy));

  /* Header and hero background, taken from the Maxel reference (Yvan's choice) */
  --black: #0f0f0f;
  --black-raised: color-mix(in srgb, #fff 12%, var(--black));
  --black-card: color-mix(in srgb, #fff 6%, var(--black));
  /* Deep navy from cysn.app, used in the double triangle marker (Yvan's choice) */
  --navy-cysn: #0c1c53;
  --line-on-black: color-mix(in srgb, #fff 10%, transparent);

  /* Typography: Poppins headings, Roboto body (Maxel reference) */
  --font-heading: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Roboto", "Segoe UI", system-ui, sans-serif;
  --weight-heading: 600;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-3xl: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --text-4xl: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  --text-display: clamp(2.75rem, 1.5rem + 5vw, 5.75rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.65;

  --tracking-name: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-label: 0.12em;

  /* Spacing, 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container: 81.25rem;
  --gutter: var(--space-5);
  --section-space: var(--space-20);
  --header-height: 4.75rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 200ms;
}

@media (min-width: 48rem) {
  :root {
    --gutter: var(--space-8);
    --section-space: var(--space-24);
  }
}

@media (min-width: 64rem) {
  :root {
    --header-height: 6.625rem;
    --gutter: var(--space-12);
    --section-space: var(--space-32);
  }
}