/* Haven Engineering Platform Design Tokens, v2.4 (approved by Chris, October 3, 2026).
   The source of truth for every Haven-branded app. Import or copy these values; do not redefine the palette.
   The human-readable standard is Haven-Brand-Colors.md. Update both together, with a version bump. */
@import url("https://api.fontshare.com/v2/css?f[]=zodiak@400,500,700&f[]=general-sans@400,500,600&display=swap");

:root {
  /* Core palette */
  --haven-black: #000000;          /* header, top bar, hero, footer, feature sections, logo field */
  --haven-offwhite: #F7F5F0;       /* page and workspace background */
  --haven-offwhite-2: #EFECE4;     /* secondary panels on off-white */
  --haven-navy: #032654;           /* text, headlines, links and primary buttons on off-white */
  --haven-muted: #4A5A75;          /* secondary text and labels on off-white */
  --haven-white: #FFFFFF;          /* text and buttons on black */

  /* On-black helpers */
  --haven-lifted-black: #0F0F0F;   /* cards on black sections */
  --haven-edge-on-black: #FFFFFF2E;/* card edges on black */
  --haven-outline-on-black: #FFFFFF59; /* outlined boxes on black */
  --haven-text-muted-on-black: #C8C8C8;

  /* Lines */
  --haven-line: #0326542E;         /* borders on off-white */

  /* Reference only (retired as backgrounds in v2.1) */
  --haven-midnight: #07101F;

  /* Type */
  --haven-font-display: "Zodiak", Georgia, serif;
  --haven-font-text: "General Sans", system-ui, sans-serif;

  /* Hero fade (black menu into photo) */
  --haven-hero-fade-desktop: 250px;
  --haven-hero-fade-mobile: 110px;
}

/* Buttons */
.haven-btn-primary { background: var(--haven-navy); color: var(--haven-white); border: 1px solid var(--haven-navy); }
.haven-on-black .haven-btn-primary { background: var(--haven-white); color: var(--haven-black); border-color: var(--haven-white); }
.haven-btn-secondary { background: transparent; color: var(--haven-navy); border: 1px solid var(--haven-navy); }
.haven-on-black .haven-btn-secondary { color: var(--haven-white); border-color: #FFFFFF99; }

/* Hero top fade */
.haven-hero-fade::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: var(--haven-hero-fade-desktop); pointer-events: none;
  background: linear-gradient(180deg,#000 0%,rgba(0,0,0,.93) 8%,rgba(0,0,0,.82) 18%,rgba(0,0,0,.68) 29%,rgba(0,0,0,.52) 41%,rgba(0,0,0,.36) 53%,rgba(0,0,0,.22) 65%,rgba(0,0,0,.11) 77%,rgba(0,0,0,.04) 89%,rgba(0,0,0,0) 100%);
}
@media (max-width: 600px) { .haven-hero-fade::after { height: var(--haven-hero-fade-mobile); } }

/* v2.2: step cards on black sections (off-white card, navy text, navy number circle) */
.haven-step-card { background: var(--haven-offwhite); color: var(--haven-navy); border-radius: 6px; padding: 26px 24px; }
.haven-step-card p { color: #3D4F6B; }
.haven-step-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--haven-navy); color: var(--haven-offwhite); font-family: var(--haven-font-display); }
@media (max-width: 760px) { .haven-step-card { padding: 20px; } }

/* v2.2: before/after split line (two real photos, diagonal seam) */
:root { --haven-split-line: #FFFFFF; --haven-split-line-width-2400: 44px; }

/* v2.4: breadcrumb bar on black under the header (no off-white strip) */
.haven-breadcrumbs { background: var(--haven-black); color: #9AA3B2; border-bottom: 1px solid #FFFFFF1F; }
.haven-breadcrumbs a { color: #C8C8C8; }
.haven-breadcrumbs a:hover, .haven-breadcrumbs [aria-current] { color: var(--haven-white); }