/*
 * Base typography.
 *
 * The display face is Cormorant Garamond at weight 400 — never bolder. A light
 * serif at display sizes is what reads as editorial; a bold serif reads as
 * general retail. Only the 400 weight is shipped, so heavier cannot be used.
 */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

body {
  background-color: var(--k-paper);
  color: var(--k-ink);
  font-family: var(--k-font-body);
  font-size: var(--k-size-body);
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

h1, h2, h3, h4, .k-display {
  font-family: var(--k-font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.002em;
  text-wrap: balance;
  color: var(--k-ink);
}

/* Fixed at 40px on every inner page, deliberately not fluid. One title size
   across the whole site is what makes it feel systematic. */
h1 { font-size: var(--k-size-h1); }
h2 { font-size: var(--k-size-h2); }
h3 { font-size: var(--k-size-h3); line-height: 1.3; }

/* The only place the display size is permitted is the homepage hero. */
.k-display {
  font-size: var(--k-size-display);
  line-height: 1.04;
  letter-spacing: -0.008em;
}

.k-display em,
h1 em, h2 em {
  font-style: italic;
  color: var(--k-forest);
}

p { max-width: var(--k-measure); }
p + p { margin-top: var(--k-space-3); }

.k-lead {
  font-size: var(--k-size-lead);
  line-height: 1.65;
  color: var(--k-ink-muted);
}

small, .k-small { font-size: var(--k-size-small); }

strong, b { font-weight: 600; }

a {
  color: var(--k-forest);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--k-duration) var(--k-ease);
}

a:hover { color: var(--k-rose-deep); }

/* Eyebrow / label. The typographic voice of the whole design: small, wide,
   uppercase, quiet. Used for section labels and the formulation rail. */
.k-eyebrow {
  font-family: var(--k-font-body);
  font-size: var(--k-size-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--k-tracking-wide);
  color: var(--k-ink-muted);
  line-height: 1.4;
}

::selection {
  background: var(--k-forest-tint);
  color: var(--k-ink);
}

hr {
  border: 0;
  border-top: 1px solid var(--k-rule);
  margin: var(--k-space-6) 0;
}

/* On forest grounds, swap to the tokens measured safe against it.
   rose is deliberately absent here — see TOKENS.md forbidden pairs. */
.k-on-forest {
  background-color: var(--k-forest);
  color: var(--k-paper);
}

.k-on-forest h1, .k-on-forest h2, .k-on-forest h3, .k-on-forest .k-display { color: var(--k-paper); }
.k-on-forest .k-eyebrow { color: var(--k-brass-on-forest); }
.k-on-forest a { color: var(--k-brass-on-forest); }
.k-on-forest hr { border-top-color: color-mix(in srgb, var(--k-paper) 22%, transparent); }
.k-on-forest :focus-visible { outline-color: var(--k-brass-on-forest); }