/* Design tokens from Figma Foundations (SPEC.MD §5). Keep --sds- names in sync with Figma. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Syne"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/syne-600.woff2") format("woff2"); }

:root {
  /* Colour: neutral */
  --sds-color-text-default-default: #1e1e1e;
  --sds-color-text-default-secondary: #757575;
  --sds-color-text-default-tertiary: #b3b3b3; /* placeholder only */
  --sds-color-background-default-default: #ffffff;
  --sds-color-background-default-secondary: #f5f5f5;
  --sds-color-border-default-default: #d9d9d9;

  /* Colour: state */
  --sds-color-background-positive-default: #14ae5c;
  --sds-color-text-danger-default: #900b09;
  --sds-color-background-danger-tertiary: #fee9e7;

  /* Colour: brand */
  --sds-color-background-brand-default: #0057f4;
  --sds-color-background-brand-hover: #0046c4;
  --sds-color-background-brand-secondary: #e6eefe;
  --sds-color-text-brand-default: #0057f4;
  --sds-color-text-brand-on-brand: #ffffff;
  --sds-color-border-brand-default: #0057f4;
  --navlo-color-navy: #0108b5; /* deep blue from the logo; footer and testimonial accents */

  /* Typography */
  /* Navlo typography (three families): Inter for H1 and body, Montserrat for H2/H3, Syne for the header button */
  --sds-typography-family-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sds-typography-family-h1: "Inter", system-ui, sans-serif;
  --sds-typography-family-h2: "Montserrat", system-ui, sans-serif;
  --sds-typography-family-h3: "Montserrat", system-ui, sans-serif;
  --sds-typography-family-nav-button: "Syne", system-ui, sans-serif;
  --sds-typography-family-mono: "Roboto Mono", ui-monospace, monospace;
  --sds-typography-title-hero-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.5rem);
  --sds-typography-title-page-size: clamp(2.25rem, 1.95rem + 1.1vw, 3rem);
  --sds-typography-subtitle-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
  --sds-typography-heading-size: 1.5rem;
  --sds-typography-subheading-size: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);
  --sds-typography-body-size-medium: 1rem;
  --sds-typography-body-size-small: 0.875rem;
  --sds-typography-weight-regular: 400;
  --sds-typography-weight-semibold: 600;
  --sds-typography-weight-bold: 700;

  /* Space */
  --sds-size-space-100: 4px;
  --sds-size-space-200: 8px;
  --sds-size-space-300: 12px;
  --sds-size-space-400: 16px;
  --sds-size-space-600: 24px;
  --sds-size-space-800: 32px;
  --sds-size-space-1600: 64px;
  --sds-size-space-2400: 96px;
  --sds-size-space-4000: 160px;

  /* Radius, border, shadow */
  --sds-size-radius-100: 4px;
  --sds-size-radius-200: 8px;
  --sds-size-radius-400: 16px;
  --sds-size-radius-xl: 24px;
  --sds-size-radius-full: 9999px;
  --sds-size-stroke-border: 1px;
  --sds-effects-shadow-200: 0 1px 4px #0c0c0d0d, 0 1px 4px #0c0c0d1a;
  --sds-effects-shadow-300: 0 4px 4px -1px #0c0c0d0d, 0 4px 4px -1px #0c0c0d1a;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: var(--sds-size-space-400);
  --section-space: var(--sds-size-space-1600);
  --header-height: 72px;
}

@media (min-width: 768px) {
  :root { --gutter: var(--sds-size-space-800); }
}

@media (min-width: 1024px) {
  :root {
    --section-space: var(--sds-size-space-2400);
    --header-height: 96px;
  }
}