:root {
  color-scheme: light;
  --bg: #f7f6f2;
  --paper: #ffffff;
  --ink: #19201f;
  --muted: #5f6865;
  --line: #dedbd2;
  --accent: #1f6b62;
  --accent-dark: #164f48;
  --soft: #e8f0ec;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

a {
  color: var(--accent-dark);
}

.site-header,
.site-footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  font-weight: 800;
  text-decoration: none;
  color: var(--ink);
}

nav {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

nav a {
  text-decoration: none;
  color: var(--muted);
  font-size: 14px;
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 48px;
}

.hero,
.band,
.legal-page {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 32px;
  margin: 18px 0;
}

.hero {
  padding-top: 56px;
  padding-bottom: 56px;
}

.eyebrow {
  color: var(--accent-dark);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
}

h1 {
  margin: 0;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.02;
  letter-spacing: 0;
}

h2 {
  margin-top: 0;
  font-size: 28px;
}

h3 {
  margin-bottom: 8px;
}

.lead {
  max-width: 760px;
  color: var(--muted);
  font-size: 20px;
}

.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 6px;
  padding: 0 18px;
  text-decoration: none;
  font-weight: 700;
}

.button.primary {
  background: var(--accent);
  color: white;
}

.button.secondary {
  background: var(--soft);
  color: var(--accent-dark);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

.muted {
  background: var(--soft);
}

.checks {
  padding-left: 22px;
}

.checks li {
  margin: 8px 0;
}

.boundary {
  color: var(--muted);
}

.site-footer {
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 760px) {
  .site-header,
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero,
  .band,
  .legal-page {
    padding: 22px;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .button {
    width: 100%;
  }
}

/* =========================================================================
   BP-D1 DESIGN TOKENS (added 2026-07-04)
   -------------------------------------------------------------------------
   Single source of truth for the calm/light/trust-heavy design system shared
   by the reference mockups in design_mockups/ and future template work.
   This block ONLY adds new CSS custom properties and a few new token-based
   utility classes. It does not restyle any existing selector above.

   The existing :root palette (--bg, --paper, --ink, --muted, --line,
   --accent, --accent-dark, --soft) is preserved and re-exposed below under
   semantic token names so future work references tokens, not raw hexes.
   Tone rule: light surfaces, ink-on-paper text, one calm teal accent. Never
   a dark-console aesthetic. Status colors are muted, never alarm-red.
   ========================================================================= */
:root {
  /* --- Brand + surface palette (aliases of the accepted BP-1 palette) --- */
  --bc-bg: #f7f6f2;          /* page background - warm off-white */
  --bc-paper: #ffffff;       /* card / panel surface */
  --bc-ink: #19201f;         /* primary text */
  --bc-muted: #5f6865;       /* secondary text, captions */
  --bc-line: #dedbd2;        /* hairline borders, dividers */
  --bc-accent: #1f6b62;      /* calm teal - primary actions */
  --bc-accent-dark: #164f48; /* pressed/hover accent, links */
  --bc-soft: #e8f0ec;        /* soft accent fill - quiet bands, chips */

  /* --- Extended semantic surfaces (new) --- */
  --bc-paper-sunken: #fbfaf7; /* inset areas (dropzone, list rows) */
  --bc-focus: #1f6b62;        /* keyboard focus ring color */
  --bc-overlay: rgba(25, 32, 31, 0.42); /* modal scrim */

  /* --- Status palette (muted, reassurance-first, never alarm) --- */
  --bc-info: #2d6a8f;        --bc-info-soft: #e6eef4;
  --bc-success: #2f7a5b;     --bc-success-soft: #e3f0ea;
  --bc-warning: #8a6d1f;     --bc-warning-soft: #f4eeda; /* attention, not fear */
  --bc-danger: #9a4b3f;      --bc-danger-soft: #f3e6e2;  /* soft brick, for delete/expired only */

  /* --- Type scale (modular ~1.2, mobile-first, generous line-height) --- */
  --bc-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bc-text-xs: 13px;   /* legal fine print, captions */
  --bc-text-sm: 14px;   /* secondary UI text, nav */
  --bc-text-base: 17px; /* body - larger than default for stressed readers */
  --bc-text-md: 20px;   /* lead paragraphs, standfirst */
  --bc-text-lg: 24px;   /* section headings (h2 on small screens) */
  --bc-text-xl: 30px;   /* page titles */
  --bc-text-2xl: clamp(32px, 6vw, 52px); /* hero headline */
  --bc-leading-tight: 1.15;
  --bc-leading-normal: 1.55;
  --bc-weight-regular: 400;
  --bc-weight-medium: 600;
  --bc-weight-bold: 800;

  /* --- Spacing scale (4px base) --- */
  --bc-space-1: 4px;
  --bc-space-2: 8px;
  --bc-space-3: 12px;
  --bc-space-4: 16px;
  --bc-space-5: 24px;
  --bc-space-6: 32px;
  --bc-space-7: 48px;
  --bc-space-8: 64px;

  /* --- Radius + elevation (soft, paper-like, low shadow) --- */
  --bc-radius-sm: 6px;
  --bc-radius-md: 10px;
  --bc-radius-lg: 16px;
  --bc-radius-pill: 999px;
  --bc-shadow-sm: 0 1px 2px rgba(25, 32, 31, 0.06);
  --bc-shadow-md: 0 4px 16px rgba(25, 32, 31, 0.08);

  /* --- Layout --- */
  --bc-measure: 62ch;    /* comfortable reading width */
  --bc-col-max: 640px;   /* mobile-first single-column max width */
  --bc-touch: 44px;      /* minimum touch target */

  /* --- Motion (calm, short, reduced-motion aware in mockups) --- */
  --bc-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --bc-dur: 180ms;
}

/* Keyboard focus visibility for token-based components (mockups reuse this). */
.bc-focusable:focus-visible {
  outline: 3px solid var(--bc-focus);
  outline-offset: 2px;
}
/* =========================== END BP-D1 TOKENS =========================== */