/* base.css — token layer generated from templatize/tokens.json (T0 measurements).
   Written fresh per TEMPLATIZE-SPEC §T3: no source CSS rules pass through.
   A brand swap is a :root override of this block — section CSS references
   ONLY these custom properties for color, type, spacing, radius, shadow. */

:root {
  /* palette (roles from tokens.json; --color-surface-dark aliases the primary
     navy per the site ledger — it is both the heading ink and the dominant
     dark surface) */
  --color-primary: #003366;
  --color-surface-dark: #003366;
  --color-surface-deep: #00264c;
  --color-surface-deep-alt: #002953;
  --color-surface-page: #ffffff;
  --color-surface-light: #eff0f7;
  --color-surface-light-alt: #f4f4f4;
  --color-accent: #ffc323;
  --color-text-body: #383f51;
  --color-text-strong: #000000;
  --color-ink-alt: #202842;
  --color-text-on-dark: #ffffff;
  --color-text-on-accent: #003366;

  /* type (families measured in use; open Google families, loaded by the page shell) */
  --font-heading: 'Geologica', 'Trebuchet MS', sans-serif;
  --font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body-alt: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --fs-display: 52px;
  --fs-h1: 48px;
  --fs-h2: 40px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fw-heading: 700;
  --fw-semibold: 600;
  --fw-body: 400;

  /* spacing scale (dominant measured steps) */
  --space-2xs: 5px;
  --space-xs: 10px;
  --space-sm: 15px;
  --space-md: 20px;
  --space-lg: 30px;
  --space-xl: 50px;
  --space-2xl: 80px;

  /* radii (measured) */
  --radius-sm: 10px;
  --radius-card: 20px;
  --radius-lg: 25px;
  --radius-xl: 30px;
  --radius-media: 32px;
  --radius-pill: 70px;
  --radius-circle: 100px;

  /* shadows (measured) */
  --shadow-card: 0 3px 25px 0 rgba(0, 0, 0, 0.15);
  --shadow-float: 0 8px 30px 0 rgba(8, 8, 39, 0.1);
  --shadow-inset-emboss: inset 2px 2px 4px 0 rgba(255, 255, 255, 0.1),
    inset -2px -2px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  --shadow-soft: 0 4px 8px 0 rgba(0, 0, 0, 0.15);

  /* layout */
  --container-max: 1200px;
  --container-pad: 30px;
}

/* minimal reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text-body);
  background: var(--color-surface-page);
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  color: var(--color-primary);
  margin: 0 0 var(--space-md);
  line-height: 1.15;
}

a {
  color: inherit;
}

button {
  font: inherit;
  cursor: pointer;
}

.tpl-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}