/* ==========================================================================
   base.css — design tokens, reset, typography, utilities, accessibility
   Load order: base.css → components.css → layout.css
   ========================================================================== */

:root {
  /* Brand colours */
  --navy: #102b46;
  --navy-2: #183d5d;
  --navy-deep: #0a2035;
  --navy-darkest: #081d30;
  --gold: #caa66a;        /* decorative + button backgrounds + text on dark */
  --gold-light: #e2c28b;  /* accent text on dark backgrounds */
  --gold-ink: #7d5f2c;    /* gold-toned TEXT on light backgrounds (WCAG AA) */
  --gold-tint: #f1eadf;

  /* Neutrals */
  --ink: #172b3c;
  --muted: #56677a;       /* secondary text, ≥ 4.5:1 on white and cream */
  --cream: #f7f5f0;
  --line: #e2e7eb;
  --field-border: #75879a; /* form control borders, ≥ 3:1 on white */
  --white: #fff;

  /* Feedback */
  --green-bg: #d9e9df;
  --green-ink: #24543a;
  --danger: #b42318;
  --danger-bg: #fdecea;
  --success-bg: #e7f3ec;

  /* Text on dark surfaces */
  --on-dark: #d9e3eb;
  --on-dark-muted: #b6c5d1;

  /* Type */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.8125rem;  /* 13px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-lg: 1.0625rem;  /* 17px */

  /* Layout */
  --wrap: 1160px;
  --gutter: 20px;
  --radius: 8px;
  --header-h: 76px;
  --shadow: 0 14px 35px rgb(16 43 70 / 0.08);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0; }

/* :where() keeps specificity at zero so classes like .wrap can still set margins */
:where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }

/* Anchor targets clear the sticky header */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  border-radius: 6px;
  transform: translateY(-160%);
  transition: transform 0.15s ease;
}
.skip-link:focus { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Utilities ---------- */
.wrap {
  width: min(var(--wrap), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.text-accent { color: var(--gold-light); }

@media (max-width: 580px) {
  :root { --gutter: 16px; --header-h: 64px; }
}