/* ==========================================================================
   Delmarva AI — design tokens (M2 comp)
   Source of truth: brand/brand-spec.md. Values are verbatim from the spec.
   Treatments: html.t1 (Paper) · html.t2 (Harbor, chosen) · html.t3 (alt display face)
   ========================================================================== */

/* ---- Fonts (variable, latin subset) ---- */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-latin-var.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* T3 alternate display face */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

/* ---- Palette A (spec §2) ---- */

:root {
  --blue-900: #0C3A52;
  --blue-700: #14567A;
  --blue-500: #2377A0;
  --blue-300: #7FB4CC;
  --blue-100: #DCEBF2;
  --harbor:   #0A2E42;

  --gold-600: #B37F2E;
  --gold-500: #DFA349;
  --gold-100: #F7E8CE;

  --n0:   #FBFAF7;
  --n100: #F1EEE8;
  --n300: #D8D3C8;
  --n500: #8C8679;
  --n700: #55514A;
  --n900: #262420;

  --success:      #2E7D4F;
  --success-tint: #E4F1E9;
  --error:        #B23A2E;
  --error-tint:   #F9E8E5;

  /* ---- Type (spec §3) ---- */
  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* ---- Semantic surface tokens (light defaults; T2 remaps band surfaces) ---- */
  --page-bg: var(--n0);
  --card-bg: var(--n100);
  --rule: var(--n300);
  --heading: var(--blue-900);
  --body-text: var(--n900);
  --body-muted: var(--n700);
  --caption: var(--n500);
  --link: var(--blue-500);
  --link-hover: var(--blue-700);

  /* Header / hero band — light by default (T1, T3) */
  --band-bg: var(--n0);
  --band-heading: var(--blue-900);
  --band-text: var(--n700);
  --band-mark-fill: var(--blue-700);
  --band-wordmark: var(--blue-900);
  --band-tagline: var(--blue-700);       /* Blue 700 on light (spec §4) */

  /* Footer — light by default (T1, T3) */
  --footer-bg: var(--n100);
  --footer-mark-fill: var(--blue-700);
  --footer-wordmark: var(--blue-900);
  --footer-text: var(--n700);
  --footer-rule: var(--n300);

  /* Lockup base size (spec §4): H = mark height. Derived measures live on
     .lockup in site.css so per-instance H overrides recompute correctly. */
  --lockup-h: 60px;                                 /* mobile */

  /* Spacing rhythm — 8px base */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px;
  --s6: 48px; --s8: 64px; --s12: 96px;
}

@media (min-width: 768px) {
  :root { --lockup-h: 72px; }
}

/* ---- T2 · Harbor: dark hero band + dark footer (spec §5 dark-surface rules) ---- */

html.t2 {
  --band-bg: var(--harbor);
  --band-heading: #FFFFFF;
  --band-text: var(--blue-300);
  --band-mark-fill: #FFFFFF;             /* reversed mark: white peninsula (spec §1) */
  --band-wordmark: #FFFFFF;
  --band-tagline: var(--gold-500);       /* Gold 500 on dark (spec §4) */

  --footer-bg: var(--harbor);
  --footer-mark-fill: #FFFFFF;
  --footer-wordmark: #FFFFFF;
  --footer-text: var(--blue-300);
  --footer-rule: rgba(127, 180, 204, 0.28);
}

/* ---- T3 · Alternate display face: T1's color exactly, Fraunces for display ---- */

html.t3 {
  --font-display: "Fraunces", "Georgia", serif;
}