/* ── styles.css ── */
/* ===================================================================
   WHITEHART — global entry point.
   Consumers link THIS file only. Imports declare every token + font.
   Keep this file as @import lines only — no rules here.
   =================================================================== */

/* ── assets/fonts.css ── */
/* Whitehart — Proxima Nova web fonts.
   The brand's full type system. Weights: 300 Light, 400 Regular, 600 Semibold,
   700 Bold, 800 Extrabold, 900 Black. A condensed cut is used for tight labels. */


/* Condensed — for tightly-tracked labels / overlines where space is tight */

/* ── tokens/colors.css ── */
/* ===================================================================
   WHITEHART — COLOR TOKENS
   Sampled directly from the 2022 proposal, 2022 mailer and 2026
   presentation template. Two pillars: electric Whitehart Blue and a
   deep indigo Ink. Coral is the single hot accent. Everything else is
   a cool, professional neutral ramp.
   =================================================================== */
:root { /* @kind color */
}

/* ── tokens/typography.css ── */
/* ===================================================================
   WHITEHART — TYPOGRAPHY TOKENS
   One typeface does everything: Proxima Nova. Display is set in the
   heavy cuts (Black / Extrabold). Overlines & labels use the brand's
   signature wide letter-spacing, uppercase, often with a "// " prefix.
   =================================================================== */
:root {
  --font-display: var(--font-sans); /* @kind font */

  /* Type scale (rem @ 16px base) */
  --fs-overline: 0.75rem;   /* 12 — tracked label */
  --fs-caption:  0.8125rem; /* 13 */
  --fs-small:    0.875rem;  /* 14 */
  --fs-body:     1rem;      /* 16 */
  --fs-body-lg:  1.125rem;  /* 18 */
  --fs-h6:       1.25rem;   /* 20 */
  --fs-h5:       1.5rem;    /* 24 */
  --fs-h4:       1.875rem;  /* 30 */
  --fs-h3:       2.5rem;    /* 40 */
  --fs-h2:       3.25rem;   /* 52 */
  --fs-h1:       4.25rem;   /* 68 */
  --fs-display:  5.5rem; /* @kind font */
  --lh-body: 1.55; /* @kind font */

  /* Letter spacing */
  --ls-display: -0.02em; /* @kind font */
  --ls-body: 0;
}

/* ── tokens/spacing.css ── */
/* ===================================================================
   WHITEHART — SPACING, RADII, SHADOWS, LAYOUT
   Generous whitespace, large soft-cornered cards, restrained shadows.
   8px base grid.
   =================================================================== */
:root {
}

/* ── tokens/base.css ── */
/* ===================================================================
   WHITEHART — base layer.
   Light-weight resets + a handful of brand text utilities that recur
   across components, cards, slides and kits. Token-driven only.
   =================================================================== */

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

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Display & headings ---- */
.wh-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
}
.wh-h1, .wh-h2, .wh-h3, .wh-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text-strong);
  margin: 0;
}
.wh-h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); }
.wh-h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
.wh-h3 { font-size: var(--fs-h3); }
.wh-h4 { font-size: var(--fs-h4); }

/* ---- Signature overline / label ---- */
.wh-overline {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* The "// LABEL" device, used heavily across Whitehart collateral */
.wh-slash::before {
  content: "// ";
  color: var(--color-accent);
  font-weight: var(--fw-bold);
}

/* ---- Body copy ---- */
.wh-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
.wh-muted { color: var(--text-muted); }
.wh-accent { color: var(--text-accent); }

/* ---- Surfaces ---- */
.wh-on-dark { color: var(--text-on-dark); }
.wh-card {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}