/* ============================================================
   Kilter — Design Tokens
   Colours, type, spacing, radii, shadows, motion.
   The culture your strategy demands.
   ============================================================ */

/* ---------- Web fonts (display) ----------
   F37 Lothian Extra Bold — licensed for Kilter (desktop + web).
   The wordmark and all display headlines are set in this face.
   Web fallback: Instrument Serif (Google Fonts).
*/
@font-face {
  font-family: "F37 Lothian";
  src: url("fonts/F37Lothian-ExtraBold.otf") format("opentype"),
       url("fonts/F37Lothian-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  /* block, not swap: headlines wait briefly for Lothian rather than painting
     in Georgia and reflowing when the real face arrives. */
  font-display: block;
}

/* Instrument Serif — fallback for F37 Lothian on web */
/* Instrument Serif is linked from each page head (see note above). */

/* Söhne (Klim Type Foundry) is the preferred body face.
   It is a licensed commercial typeface — you must host it yourself.
   Drop the licensed web fonts into fonts/ and uncomment the @font-face
   block below. Fallback stack ends in system-ui so the page is always
   legible even without the licensed file. */

/* @font-face {
  font-family: "Söhne";
  src: url("fonts/soehne-buch.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Söhne";
  src: url("fonts/soehne-kraftig.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Söhne";
  src: url("fonts/soehne-halbfett.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
} */

:root {
  /* ============ COLOUR ============
     The palette is built on complementary pairs — opposing forces in balance.
     Usage ratios (70/20/10): neutrals 70%, brand pair 20%, signal 10%.
  */

  /* Primary pair — the brand signature */
  --kilter-forest: #1B4332;   /* primary brand: systems, rigour, strategy */
  --kilter-blush:  #DAAAB0;   /* complementary: people, warmth, culture   */

  /* Signal — used sparingly (~10%) */
  --kilter-butter: #E8D24C;   /* light switching on; data, callouts      */

  /* Neutrals — the workhorses (~70%) */
  --kilter-ink:    #0F0F0E;   /* body text, dark backgrounds              */
  --kilter-chalk:  #F5F2EB;   /* warm off-white page backgrounds          */
  --kilter-stone:  #B8B3A8;   /* mid-neutral: captions, borders           */
  --kilter-iron:   #6B6860;   /* dark neutral: secondary text, metadata   */

  /* Tonal variants of Forest, derived for surface depth.
     Use sparingly — never substitute for the canonical brand colour. */
  --kilter-forest-deep:  #102b20;
  --kilter-forest-soft:  #2a5a44;

  /* Semantic ink-on-chalk (light theme) */
  --color-bg:           var(--kilter-chalk);
  --color-bg-elevated:  #FFFFFF;
  --color-bg-inverse:   var(--kilter-ink);
  --color-fg:           var(--kilter-ink);
  --color-fg-muted:     var(--kilter-iron);
  --color-fg-subtle:    var(--kilter-stone);
  --color-fg-inverse:   var(--kilter-chalk);
  --color-border:       #DCD8CE;            /* warm-grey hairline */
  --color-border-strong:var(--kilter-stone);
  --color-accent:       var(--kilter-forest);
  --color-accent-soft:  var(--kilter-blush);
  --color-signal:       var(--kilter-butter);
  --color-link:         var(--kilter-forest);

  /* ============ TYPE ============ */
  --font-display: "F37 Lothian", "Instrument Serif", Georgia, "Times New Roman", serif;
  /* Body: Söhne (Klim) preferred — falls back through high-quality system
     neo-grotesques. -apple-system + Inter Variable + Segoe UI keep the
     same vertical metrics so the page reads identically when Söhne
     isn't installed. */
  --font-body:    "Söhne", "Söhne Buch", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-label:   "Söhne", "Söhne Kräftig", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Display sizes (web px; print equivalents in comments) */
  --type-hero:        72px;   /* 48–72pt range */
  --type-display:     56px;
  --type-h1:          44px;
  --type-h2:          32px;   /* section headline 28–36pt */
  --type-h3:          24px;
  --type-sub:         20px;   /* sub-headline 18–22pt */
  --type-body-lg:     18px;
  --type-body:        16px;   /* body 16px web / 11pt print */
  --type-small:       14px;
  --type-caption:     13px;   /* caption 12–13px uppercase */
  --type-micro:       11px;

  /* Tracking + leading */
  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-body:    0;
  --tracking-label:   0.08em;     /* 0.06–0.1em */
  --tracking-label-wide: 0.14em;

  --leading-display:  1.08;       /* 1.1–1.15 at the largest sizes */
  --leading-headline: 1.12;
  --leading-body:     1.55;
  --leading-tight:    1.25;

  /* ============ SPACING (8pt-ish, with finer steps for type) ============ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Page rhythm */
  --page-margin:      48px;
  --content-max:      1240px;
  --reading-max:      68ch;

  /* ============ RADII ============
     Kilter is geometric and architectural. Corners are tight — never pillowed.
     Reserve larger radii for ident tiles and feature cards. */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-4: 12px;
  --radius-5: 16px;   /* ident tiles */
  --radius-pill: 999px;

  /* ============ BORDERS ============ */
  --border-hairline: 1px solid var(--color-border);
  --border-strong:   1px solid var(--color-fg);
  --border-divider:  1px solid var(--color-border-strong);

  /* ============ SHADOWS ============
     Kilter avoids decorative shadow. Use sparingly for elevated surfaces only.
     The brand prefers borders, panels, and colour-block depth. */
  --shadow-1: 0 1px 0 rgba(15,15,14,0.04), 0 1px 2px rgba(15,15,14,0.04);
  --shadow-2: 0 2px 6px rgba(15,15,14,0.06), 0 0 0 1px rgba(15,15,14,0.04);
  --shadow-3: 0 12px 32px -8px rgba(15,15,14,0.18);
  --shadow-inset: inset 0 0 0 1px rgba(245,242,235,0.08);

  /* ============ MOTION ============
     One easing across the system: fast start, smooth settle.
     "Something resolving into place." */
  --ease-kilter: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-ui:    280ms;
  --duration-logo:  900ms;
  --duration-ident: 600ms;
}

/* ===================================================================
   ELEMENT DEFAULTS
   Resets stay light. We're not building a CSS framework — just sensible
   defaults so a bare HTML file looks like a Kilter document.
   =================================================================== */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  font-weight: 400;
}

/* Display + headlines — F37 Lothian Extra Bold */
h1, h2, h3, .h-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-headline);
  color: var(--color-fg);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1, .h1 {
  font-size: var(--type-h1);
  line-height: var(--leading-display);
}
h2, .h2 { font-size: var(--type-h2); }
h3, .h3 { font-size: var(--type-h3); line-height: var(--leading-tight); }

.h-hero    { font-family: var(--font-display); font-weight: 800;
             font-size: var(--type-hero); letter-spacing: var(--tracking-display);
             line-height: var(--leading-display); }
.h-display { font-size: var(--type-display); }

/* Sub-headlines — Aptos Bold */
h4, .sub-headline {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--type-sub);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
  color: var(--color-fg);
}

p, .body {
  margin: 0 0 var(--space-4);
  max-width: var(--reading-max);
  text-wrap: pretty;
}
p:last-child { margin-bottom: 0; }

.body-lg { font-size: var(--type-body-lg); line-height: var(--leading-body); }
.body-sm { font-size: var(--type-small); }

/* Labels + captions — Aptos Medium, uppercase, tracked.
   Never used for paragraph text. Stone or Iron colour. */
.label, .caption, .eyebrow {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--type-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-fg-muted);
  line-height: 1.4;
}
.label-stone { color: var(--kilter-stone); }
.label-iron  { color: var(--kilter-iron); }

/* Links — Forest underline, no link-blue */
a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity var(--duration-ui) var(--ease-kilter);
}
a:hover { opacity: 0.7; }

/* Selection — Butter on Ink */
::selection { background: var(--kilter-butter); color: var(--kilter-ink); }

/* Rule — hairline divider */
hr {
  border: 0;
  border-top: var(--border-hairline);
  margin: var(--space-6) 0;
}

/* Utility: reverse (chalk-on-ink / chalk-on-forest) surfaces */
.surface-ink,
.surface-forest {
  color: var(--color-fg-inverse);
}
.surface-ink    { background: var(--kilter-ink); }
.surface-forest { background: var(--kilter-forest); }
.surface-blush  { background: var(--kilter-blush); color: var(--kilter-ink); }
.surface-chalk  { background: var(--kilter-chalk); color: var(--kilter-ink); }

.surface-ink h1, .surface-ink h2, .surface-ink h3,
.surface-forest h1, .surface-forest h2, .surface-forest h3 { color: var(--color-fg-inverse); }
.surface-ink .label, .surface-forest .label { color: var(--kilter-stone); }

/* Accent text */
.text-forest { color: var(--kilter-forest); }
.text-blush  { color: var(--kilter-blush);  }
.text-butter { color: var(--kilter-butter); }
.text-ink    { color: var(--kilter-ink);    }
.text-chalk  { color: var(--kilter-chalk);  }
.text-stone  { color: var(--kilter-stone);  }
.text-iron   { color: var(--kilter-iron);   }

/* ============ WORDMARK ACCENTS ============
   Accented variant — only the i-l-t cluster picks up the pair colour.
   The wordmark's existing typographic signature, made visible. */
.wordmark-accent .ilt { color: var(--kilter-blush); }
.wordmark-accent.on-forest .ilt,
.wordmark-accent.on-ink    .ilt { color: var(--kilter-butter); }

/* ============ WORDMARK VARIANTS ============
   Three sanctioned wordmark treatments:
   1. Primary       — single colour, Forest on Chalk (default)
   2. Reversed      — single colour, Chalk on Forest or Ink
   3. Scatter (static) — three colour layers offset, the static
      counterpart of the cursor-driven scatter motion logo on web.

   Rules for the scatter variant:
   • Only on hero-scale type (≥ 96px on screen, ≥ 36pt in print).
   • Order is fixed: Butter (front) → Blush (middle) → Forest (back).
   • Direction is fixed: layers offset down-left from the front layer.
   • Two amounts only: `subtle` (small marks ≤ 64px) and default (≥ 96px).
   • Never animate the static variant; it is the resting state.
   • Reserve for title slides, hero pages, divider numerals, and the
     favicon's card-fan K. Never in body content or alongside the
     primary or reversed wordmark on the same surface.
*/
.scatter-mark {
  display: inline-block;
  color: var(--kilter-butter);                        /* front */
  text-shadow:
    -6px  4px 0 var(--kilter-blush),                  /* middle */
    -14px 9px 0 var(--kilter-forest);                 /* back   */
}
.scatter-mark.on-forest { color: var(--kilter-butter); text-shadow: -6px 4px 0 var(--kilter-blush), -14px 9px 0 var(--kilter-ink); }
.scatter-mark.on-ink    { color: var(--kilter-butter); text-shadow: -6px 4px 0 var(--kilter-blush), -14px 9px 0 var(--kilter-forest); }
.scatter-mark.on-chalk  { color: var(--kilter-butter); text-shadow: -6px 4px 0 var(--kilter-blush), -14px 9px 0 var(--kilter-forest); }
.scatter-mark.subtle    { text-shadow: -3px 2px 0 var(--kilter-blush), -7px 5px 0 var(--kilter-forest); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}