/* ========================================================================
   Bon Flow · Design Tokens · v19
   ------------------------------------------------------------------------
   Source of truth: ./system-tokens.css and ./system-tokens.json (locked v19).
   This file extends those canonical tokens with derived semantic roles,
   spacing, radii, motion, and element styles. Token names match the
   canonical set; any additions are noted as "derived" in the section header.

   Fonts: Familjen Grotesk (display + marker + tag), Hanken Grotesk (body).
          Space Grotesk is used ONLY in the logotype itself and should not
          be loaded outside of it.
   ======================================================================== */

/* ── Self-hosted brand fonts ──────────────────────────────────────────
   Familjen Grotesk (display) — woff2 statics, the spec's preferred format.
   Hanken Grotesk (body)      — variable TTF, weight + italic axes.
   Space Grotesk (wordmark)   — self-hosted static TTFs; only needed if
                                rendering live "bonflow" text (lockup SVGs
                                are already outlined).
   ───────────────────────────────────────────────────────────────────── */

/* Familjen Grotesk · static woff2 (preferred) */
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('fonts/FamiljenGrotesk-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('fonts/FamiljenGrotesk-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('fonts/FamiljenGrotesk-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('fonts/FamiljenGrotesk-MediumItalic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('fonts/FamiljenGrotesk-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('fonts/FamiljenGrotesk-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('fonts/FamiljenGrotesk-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('fonts/FamiljenGrotesk-BoldItalic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* Space Grotesk · static TTFs (wordmark only) */
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Hanken Grotesk · variable TTF (weight axis) */
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/HankenGrotesk-VariableFont_wght.woff2') format('woff2-variations'),
       url('fonts/HankenGrotesk-VariableFont_wght.woff2') format('woff2'),
       url('fonts/HankenGrotesk-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/HankenGrotesk-Italic-VariableFont_wght.woff2') format('woff2-variations'),
       url('fonts/HankenGrotesk-Italic-VariableFont_wght.woff2') format('woff2'),
       url('fonts/HankenGrotesk-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── PALETTE ─────────────────────────────────────────────────────── */
  --bf-ink:          #16140F;   /* primary text · mark default fill */
  --bf-paper:        #EFEBDF;   /* canvas background (cooled cream) */
  --bf-cream:        #E8DEC8;   /* foreground on dark surfaces */
  --bf-night:        #0E0D0B;   /* dark surfaces */
  --bf-cobalt:       #0F16AB;   /* accent · primary */
  --bf-cobalt-deep:  #070C6F;   /* accent · hover / pressed */
  --bf-cobalt-soft:  #6080EA;   /* accent · soft, use on dark only */
  --bf-cream-press:  #DCD1B8;   /* cream button · pressed (one step deeper) */
  --bf-mute:         #76716B;   /* metadata, captions on paper */

  /* Semantic foreground / background roles (on paper canvas) */
  --bf-fg-1:   var(--bf-ink);     /* primary body text */
  --bf-fg-2:   var(--bf-mute);    /* captions, metadata */
  --bf-fg-3:   #B4AFA5;           /* derived: muted-on-paper for dividers */
  --bf-bg-1:   var(--bf-paper);   /* default canvas */
  --bf-bg-2:   #E5E0D0;           /* slightly sunk surface */
  --bf-accent: var(--bf-cobalt);
  --bf-accent-deep: var(--bf-cobalt-deep);

  /* Same roles, inverted on night surfaces */
  --bf-on-night-fg-1: var(--bf-cream);
  --bf-on-night-fg-2: #9A9388;
  --bf-on-night-accent: var(--bf-cobalt-soft);

  /* ── TYPE FAMILIES (canonical names from system-tokens.css) ──────── */
  --bf-font-wordmark: 'Space Grotesk', system-ui, sans-serif; /* logotype ONLY */
  --bf-font-display:  'Familjen Grotesk', system-ui, sans-serif;
  --bf-font-body:     'Hanken Grotesk', system-ui, sans-serif;

  /* Backward-compatible aliases used in earlier preview cards */
  --bf-font-logo:     var(--bf-font-wordmark);
  --bf-font-caption:  var(--bf-font-display);   /* captions are display-family now */

  /* Wordmark spec (logo only) */
  --bf-wordmark-weight:   600;
  --bf-wordmark-tracking: -0.045em;

  /* ── TYPE TOKENS ─────────────────────────────────────────────────── */
  /* Display (Familjen Grotesk 700, tracking -2%) */
  --bf-display-tracking: -0.02em;
  --bf-display-weight: 700;
  --bf-display-leading: 1.04;

  /* Body (Hanken Grotesk 400) */
  --bf-body-tracking: 0;
  --bf-body-weight: 400;
  --bf-body-leading: 1.55;

  /* Marker (Familjen Grotesk 500, sentence case) — the default eyebrow */
  --bf-marker-size:       18px;
  --bf-marker-weight:     500;
  --bf-marker-tracking:   -0.01em;
  --bf-marker-leading:    1.2;

  /* Tag (Familjen Grotesk 700, UPPERCASE, hairline rule) — for slides /
     section openers / anywhere that wants more presence than .bf-marker. */
  --bf-tag-size:          14px;
  --bf-tag-weight:        700;
  --bf-tag-tracking:      0.02em;
  --bf-tag-rule-w:        18px;

  /* Legacy caption tokens kept for backward compat — now point at marker */
  --bf-caption-tracking:  var(--bf-marker-tracking);
  --bf-caption-weight:    var(--bf-marker-weight);
  --bf-caption-leading:   var(--bf-marker-leading);

  /* Type scale — modular, anchored at body 16px */
  --bf-size-meta:    14px;     /* small metadata, footnotes */
  --bf-size-body:    16px;
  --bf-size-lead:    20px;
  --bf-size-h4:      24px;
  --bf-size-h3:      32px;
  --bf-size-h2:      48px;
  --bf-size-h1:      72px;
  --bf-size-hero:    112px;

  /* Legacy alias — old cards reference --bf-size-caption */
  --bf-size-caption: var(--bf-size-meta);

  /* ── SPACING (derived — not in canonical v19 tokens) ─────────────── */
  --bf-space-1: 4px;
  --bf-space-2: 8px;
  --bf-space-3: 12px;
  --bf-space-4: 16px;
  --bf-space-5: 24px;
  --bf-space-6: 32px;
  --bf-space-7: 48px;
  --bf-space-8: 64px;
  --bf-space-9: 96px;
  --bf-space-10: 128px;

  /* ── RADII (derived) ─────────────────────────────────────────────── */
  /* The brand favors sharp 0 / minimal 2px corners. Pill only for chips. */
  --bf-radius-0:    0px;
  --bf-radius-xs:   2px;
  --bf-radius-sm:   4px;
  --bf-radius-pill: 999px;

  /* ── HAIRLINES & BORDERS ─────────────────────────────────────────── */
  --bf-rule:        1px solid var(--bf-ink);
  --bf-rule-soft:   1px solid rgba(22, 20, 15, 0.12);   /* @kind other */
  --bf-rule-night:  1px solid rgba(232, 222, 200, 0.20); /* @kind other */

  /* ── SHADOWS (used sparingly — print-first system) ───────────────── */
  --bf-shadow-1: 0 1px 0 rgba(22, 20, 15, 0.08);
  --bf-shadow-2: 0 8px 24px -12px rgba(22, 20, 15, 0.20);

  /* ── MOTION (derived) ────────────────────────────────────────────── */
  --bf-ease:        cubic-bezier(0.2, 0.0, 0.0, 1.0); /* @kind other */
  --bf-duration-1:  120ms; /* @kind other */
  --bf-duration-2:  220ms; /* @kind other */
  --bf-duration-3:  360ms; /* @kind other */

  /* ── LAYOUT ──────────────────────────────────────────────────────── */
  --bf-container:  1200px;
  --bf-gutter:     var(--bf-space-7);
}

/* ========================================================================
   Semantic element styles — drop these into a page after :root and they
   give you the locked Bon Flow voice without further configuration.
   ======================================================================== */

html, body {
  background: var(--bf-bg-1);
  color: var(--bf-fg-1);
  font-family: var(--bf-font-body);
  font-size: var(--bf-size-body);
  font-weight: var(--bf-body-weight);
  line-height: var(--bf-body-leading);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .bf-display {
  font-family: var(--bf-font-display);
  font-weight: var(--bf-display-weight);
  letter-spacing: var(--bf-display-tracking);
  line-height: var(--bf-display-leading);
  color: var(--bf-fg-1);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--bf-size-h1); }
h2 { font-size: var(--bf-size-h2); }
h3 { font-size: var(--bf-size-h3); }
h4 { font-size: var(--bf-size-h4); }

p, .bf-body {
  font-family: var(--bf-font-body);
  font-size: var(--bf-size-body);
  line-height: var(--bf-body-leading);
  text-wrap: pretty;
  max-width: 64ch;
  margin: 0 0 var(--bf-space-4) 0;
}

.bf-lead {
  font-family: var(--bf-font-body);
  font-size: var(--bf-size-lead);
  line-height: 1.45;
  color: var(--bf-fg-1);
}

/* ── MARKER · optional eyebrow ──────────────────────────────────────
   Sentence case, in-family display, optional cobalt numeral prefix.
   Use it SPARINGLY — only when a piece sits in a numbered sequence
   (step 2 of 6). Most headlines need no eyebrow at all; lead with the
   headline.

   Markup (cobalt numeral + a space — NO em-dash):
     <p class="bf-marker"><span class="bf-marker-num">02</span> How it works</p>
*/
.bf-marker,
.bf-eyebrow {            /* alias for back-compat */
  font-family: var(--bf-font-display);
  font-weight: var(--bf-marker-weight);
  font-size: var(--bf-marker-size);
  letter-spacing: var(--bf-marker-tracking);
  line-height: var(--bf-marker-leading);
  color: var(--bf-ink);
  text-transform: none;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}
.bf-marker .bf-marker-num,
.bf-eyebrow .bf-marker-num {
  font-variant-numeric: tabular-nums;
  color: var(--bf-cobalt);
  font-weight: 600;
}
.bf-marker .bf-marker-dash,
.bf-eyebrow .bf-marker-dash {
  /* DEPRECATED — do not use the long em-dash between numeral and label.
     Kept only so older markup doesn't break. Use a plain space instead. */
  color: rgba(22, 20, 15, 0.30);
  font-weight: 400;
}

/* Smaller mute variant for inline metadata (page numbers, timestamps,
   image captions, footnotes). Same family, smaller + muted. */
.bf-marker--sm,
.bf-caption {            /* alias for back-compat */
  font-family: var(--bf-font-display);
  font-weight: 500;
  font-size: var(--bf-size-meta);
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--bf-mute);
  text-transform: none;
  margin: 0;
}

/* ── TAG · uppercase variant ────────────────────────────────────────
   Bold, +2% tracking, cobalt hairline rule. Use on slides, section
   openers, anywhere the caption needs to read as a label, not as prose.
*/
.bf-tag {
  font-family: var(--bf-font-display);
  font-weight: var(--bf-tag-weight);
  font-size: var(--bf-tag-size);
  letter-spacing: var(--bf-tag-tracking);
  text-transform: uppercase;
  line-height: 1;
  color: var(--bf-ink);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.bf-tag::before {
  content: "";
  display: inline-block;
  width: var(--bf-tag-rule-w);
  height: 1px;
  background: var(--bf-cobalt);
  flex: 0 0 auto;
}
.bf-tag--no-rule::before { display: none; }

/* On-night overrides — the cobalt accent shifts to cobalt-soft. */
.bf-on-night .bf-marker,
.bf-on-night .bf-eyebrow { color: var(--bf-cream); }
.bf-on-night .bf-marker .bf-marker-num,
.bf-on-night .bf-eyebrow .bf-marker-num { color: var(--bf-cobalt-soft); }
.bf-on-night .bf-marker .bf-marker-dash,
.bf-on-night .bf-eyebrow .bf-marker-dash { color: rgba(232, 222, 200, 0.30); }
.bf-on-night .bf-marker--sm,
.bf-on-night .bf-caption { color: var(--bf-on-night-fg-2); }
.bf-on-night .bf-tag { color: var(--bf-cream); }
.bf-on-night .bf-tag::before { background: var(--bf-cobalt-soft); }

code, kbd, samp, pre {
  font-size: 0.92em;
  font-weight: 400;
}

a {
  color: var(--bf-cobalt);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--bf-duration-1) var(--bf-ease);
}
a:hover  { color: var(--bf-cobalt-deep); }
a:active { color: var(--bf-cobalt-deep); }

hr {
  border: 0;
  border-top: var(--bf-rule);
  margin: var(--bf-space-7) 0;
}

::selection {
  background: var(--bf-cobalt);
  color: var(--bf-cream);
}

/* Italic emphasis stays in-family (per brand: no borrowed editorial serifs) */
em, i {
  font-family: inherit;
  font-style: italic;
  color: inherit;
}

/* Strong stays in-family, color may shift to cobalt for lift */
strong, b {
  font-weight: 700;
  color: inherit;
}

/* ========================================================================
   COMPONENTS — canonical control + chrome styles. These encode the locked
   decisions so you don't re-derive them per page.
   ======================================================================== */

/* ── BUTTONS ─────────────────────────────────────────────────────────
   Body family (Hanken) at 600, sentence case. NEVER uppercase, never mono.
   SOFT PILL corners (this is the one place the system rounds fully — it
   keeps controls friendly against the sharp editorial chrome).

   Two hard rules, both learned the hard way:
     1. Labels are NEVER underlined — even when the button is an <a>.
        `.bf-btn` resets text-decoration so the global link underline
        can't bleed through.
     2. Hover/press stays IN-HUE — cobalt deepens to cobalt-deep, cream
        brightens to paper. A control must never flip to near-black ink.

   Surface rule: on PAPER the primary action is --primary (cobalt fill);
   on NIGHT it is --cream (cream fill, ink label). The quiet partner that
   sits beside either is --text (plain label, no box). */
.bf-btn {
  font-family: var(--bf-font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: none;
  text-decoration: none;            /* never underline — even as <a> */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 0;
  border-radius: var(--bf-radius-pill);
  cursor: pointer;
  transition: background var(--bf-duration-2) var(--bf-ease),
              color var(--bf-duration-2) var(--bf-ease),
              box-shadow var(--bf-duration-2) var(--bf-ease);
}
.bf-btn:focus-visible {
  outline: 2px solid var(--bf-cobalt);
  outline-offset: 2px;
}

/* Primary — cobalt fill, cream label. Default action on PAPER. */
.bf-btn--primary {
  background: var(--bf-cobalt);
  color: var(--bf-cream);
}
.bf-btn--primary:hover  { background: var(--bf-cobalt-deep); color: var(--bf-cream); }
.bf-btn--primary:active { background: var(--bf-cobalt-deep); color: var(--bf-cream); }

/* Cream — cream fill, ink label. Default action on NIGHT surfaces.
   Hover BRIGHTENS toward paper; press settles one step deeper. */
.bf-btn--cream {
  background: var(--bf-cream);
  color: var(--bf-ink);
}
.bf-btn--cream:hover  { background: var(--bf-paper);       color: var(--bf-ink); }
.bf-btn--cream:active { background: var(--bf-cream-press); color: var(--bf-ink); }

/* Text — plain label, no fill, no border, no underline. The quiet
   secondary that sits beside a primary (e.g. "How we work"). */
.bf-btn--text {
  background: transparent;
  color: var(--bf-ink);
  padding-left: 6px;
  padding-right: 6px;
}
.bf-btn--text:hover  { color: var(--bf-cobalt); }
.bf-btn--text:active { color: var(--bf-cobalt-deep); }

/* Secondary — soft outline pill. Hover darkens the hairline and lays in
   a faint ink wash — it must NOT flip to a solid near-black fill. */
.bf-btn--secondary {
  background: transparent;
  color: var(--bf-ink);
  box-shadow: inset 0 0 0 1px rgba(22, 20, 15, 0.28);
}
.bf-btn--secondary:hover  { box-shadow: inset 0 0 0 1px var(--bf-ink); background: rgba(22, 20, 15, 0.05); color: var(--bf-ink); }
.bf-btn--secondary:active { background: rgba(22, 20, 15, 0.09); color: var(--bf-ink); }

/* On-night flips for the box-free / outline variants. */
.bf-on-night .bf-btn--text { color: var(--bf-cream); }
.bf-on-night .bf-btn--text:hover  { color: var(--bf-cobalt-soft); }
.bf-on-night .bf-btn--text:active { color: var(--bf-cobalt-soft); }
.bf-on-night .bf-btn--secondary {
  color: var(--bf-cream);
  box-shadow: inset 0 0 0 1px rgba(232, 222, 200, 0.34);
}
.bf-on-night .bf-btn--secondary:hover  { box-shadow: inset 0 0 0 1px var(--bf-cream); background: rgba(232, 222, 200, 0.08); color: var(--bf-cream); }
.bf-on-night .bf-btn--secondary:active { background: rgba(232, 222, 200, 0.14); color: var(--bf-cream); }

/* ── NAV LINKS ───────────────────────────────────────────────────────
   Display family (Familjen) at 500, sentence case. Muted by default on
   secondary items; hover lifts to cobalt. NEVER a mono uppercase label. */
.bf-navlink {
  font-family: var(--bf-font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bf-ink);
  text-decoration: none;
  transition: color var(--bf-duration-1) var(--bf-ease);
}
.bf-navlink--muted { color: var(--bf-mute); }
.bf-navlink:hover { color: var(--bf-cobalt); }

/* ── LOGO LOCKUP ─────────────────────────────────────────────────────
   Always render the lockup SVG as-is and size it by height. It already
   carries the correct mark-to-wordmark proportion + clearance. Do NOT
   hand-assemble the mark + a live "bonflow" text span (the dot-row is wide
   and short — sizing by height next to type makes the dots loom too large).
     <img class="bf-lockup" src="assets/bonflow-lockup-horizontal-linear-ink.svg" alt="bonflow">
   Default is a quiet chrome size (~24px); bump height for hero contexts. */
.bf-lockup {
  height: 24px;
  width: auto;
  display: block;
}