/* ============================================================
   Solas Design System · Colors & Type
   Derived from Solas Brand Guidelines V1.1
   ============================================================ */

/* -- Webfont ---------------------------------------------------
   TYPOGRAPHY — Söhne licensing status: PENDING PATH A PURCHASE.

   Per /brain/brand/state.md Söhne open item: pre-trading internal use of
   Klim TestSöhne trial fonts is permitted, but production deployment
   requires the retail licence (Path A: purchase from klim.co.nz). Until
   the licence is purchased and licensed WOFF2 files are placed in /fonts/,
   this file does NOT load Söhne — the Hanken Grotesk fallback is the
   active typeface across the system.

   Per CLO contracts list item K-5: the TestSöhne .otf trial files have
   been removed from the @font-face references in this file. The binary
   files at /fonts/TestSo_hne-*.otf are retained pending CLO+CTO history
   rewrite (git BFG) as a separate post-launch task — that work is tracked
   in the parent work order, not this remediation.

   To enable Söhne post-licence-purchase: place the licensed WOFF2 files
   at /fonts/Soehne-Buch.woff2 and /fonts/Soehne-Kraeftig.woff2, then
   uncomment the @font-face blocks below. No other file changes are
   required — every CSS selector already references the 'Söhne' family
   name, with Hanken Grotesk as the next fallback in --font-sans.

   Hanken Grotesk is loaded with display=swap to avoid a FOIT on first
   paint. For the production migration to Söhne, add a metric-override
   adjustment (ascent-override / descent-override / size-adjust on a
   @font-face block keyed to the Hanken Grotesk fallback) to keep the
   line-box metrics within ~1% of Söhne's so the layout does not shift
   when the licensed font replaces the fallback.
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* Disabled pending Söhne retail licence purchase per /brain/brand/state.md.
   Do not uncomment until the licensed WOFF2 files are in /fonts/.
@font-face {
  font-family: 'Söhne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Soehne-Buch.woff2') format('woff2');
}
@font-face {
  font-family: 'Söhne';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Soehne-Kraeftig.woff2') format('woff2');
}
*/

:root {
  /* ---- Brand colour tokens (the only four) ---- */
  --solas-paper:     #F4EFE6;   /* background — every surface */
  --solas-ink:       #1B1612;   /* body, headings, wordmark default */
  --solas-ink-blue:  #1B3A5C;   /* single cool accent — under 10% of any surface */
  --solas-warm:      #C5B19A;   /* editorial neutral — photo grading + paper variation only */

  /* ---- Semantic surface tokens ---- */
  --bg:              var(--solas-paper);
  --bg-elevated:     #EFE9DD;   /* a hair deeper than paper for cards/wells */
  --fg:              var(--solas-ink);
  --fg-muted:        #6B6258;   /* warm grey, derived from ink tinted toward paper */
  --fg-subtle:       #8E8676;   /* captions, metadata */
  --accent:          var(--solas-ink-blue);
  --rule:            #DCD4C3;   /* hairline rules on paper */
  --rule-strong:     #B5AB97;

  /* Pure black + pure white are NOT used in the brand. They are listed
     here only as a comment so no one reaches for them by accident. */
  /* --black: #000000 — DO NOT USE */
  /* --white: #FFFFFF — DO NOT USE */

  /* ---- Type family ---- */
  --font-sans: 'Söhne', 'Hanken Grotesk', 'Neue Haas Grotesk Text Pro',
               'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* No second family. Söhne (or its substitute) carries the whole system. */

  /* ---- Type weights (only two) ---- */
  --weight-buch:     400;       /* Söhne Buch — body, captions, long-form */
  --weight-kraftig:  600;       /* Söhne Kräftig — headings, wordmark, emphasis */

  /* ---- Type sizes (only three) ---- */
  --size-heading:    40px;      /* 2.5rem / 30pt */
  --size-subhead:    24px;      /* 1.5rem / 18pt */
  --size-body:       16px;      /* 1.0rem / 12pt */
  --size-caption:    13px;      /* small-cap labels, captions — used sparingly */

  /* ---- Line height ---- */
  --lh-heading:      1.15;
  --lh-subhead:      1.25;
  --lh-body:         1.5;

  /* ---- Tracking ---- */
  --track-heading:   0.01em;
  --track-body:      0;
  --track-label:     0.08em;    /* small-cap editorial labels (Monocle / Economist register) */
  --track-wordmark:  -0.01em;

  /* ---- Spacing scale (8pt base, editorial breathing) ---- */
  --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;

  /* ---- Layout ---- */
  --measure:         62ch;       /* editorial reading measure */
  --column:          720px;
  --gutter:          var(--space-7);

  /* ---- Borders / radii ----
     The brand register is editorial-print. Corners are square or
     near-square. No pill buttons, no soft cards, no decorative radii. */
  --radius-0:        0;
  --radius-1:        2px;        /* hairline softening only */
  --radius-2:        4px;        /* form fields, inline chips */

  /* ---- Rules (hairlines) ---- */
  --rule-hairline:   1px solid var(--rule);
  --rule-ink:        1px solid var(--fg);
  --rule-accent:     2px solid var(--accent);

  /* ---- Motion ---- */
  --ease:            cubic-bezier(0.2, 0.0, 0.0, 1.0);  /* quiet, considered */
  --dur-fast:        120ms;
  --dur:             200ms;
  --dur-slow:        360ms;
}

/* ============================================================
   Base
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: var(--weight-buch);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--accent);
  color: var(--solas-paper);
}

/* ============================================================
   Semantic type
   ============================================================ */

.heading, h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-kraftig);
  font-size: var(--size-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
  color: var(--fg);
  margin: 0;
}

.subhead, h2, h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-kraftig);
  font-size: var(--size-subhead);
  line-height: var(--lh-subhead);
  letter-spacing: var(--track-heading);
  color: var(--fg);
  margin: 0;
}

h3 {
  font-weight: var(--weight-buch);
}

p, .body {
  font-family: var(--font-sans);
  font-weight: var(--weight-buch);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  color: var(--fg);
  margin: 0;
  text-wrap: pretty;
}

.label, .eyebrow, .smallcaps {
  font-family: var(--font-sans);
  font-weight: var(--weight-kraftig);
  font-size: var(--size-caption);
  line-height: 1.2;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg);
}

.muted {
  color: var(--fg-muted);
}

.caption {
  font-size: var(--size-caption);
  line-height: 1.4;
  color: var(--fg-muted);
}

.italic-pull {
  font-style: italic;
  font-weight: var(--weight-buch);
  font-size: var(--size-subhead);
  line-height: var(--lh-subhead);
  color: var(--fg);
}

/* ============================================================
   The wordmark — inline SVG (post-remediation)

   Per CTO Domain 2 remediation: the wordmark is now rendered as an
   inline SVG <text> element inside chrome.jsx (component: SolasWordmark).
   The SVG inherits font-family from the link wrapper (.solas-wordmark-link),
   which uses --font-sans — currently Hanken Grotesk, switching to Söhne
   Kräftig automatically when the licensed WOFF2 files land in /fonts/.

   See SVG_WORDMARK.md for the full spec, aria conventions, and the
   PNG legacy file references (assets/wordmark-{ink,ink-blue,reversed}.png).

   Why the change: the previous .solas-wordmark class set font-size: 0 on
   a live-text anchor with a PNG background. If the PNG 404'd (e.g. asset
   path drift on a CDN), the anchor's "solas" text became visible — a
   direct breach of "Never write 'solas' as visible text." The inline SVG
   has no such failure mode; the only "solas" text node lives inside the
   <svg> and is replaced by Söhne-set type when the licence lands.
   ============================================================ */

.solas-wordmark-link {
  display: inline-block;
  text-decoration: none;
  color: var(--fg);                /* ink — default state */
  line-height: 0;                  /* prevent baseline gap below the SVG */
  vertical-align: middle;
}

.solas-wordmark-link:hover { color: var(--accent); }

.solas-wordmark--svg {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: var(--weight-kraftig);
  letter-spacing: var(--track-wordmark);
  vertical-align: middle;
  /* The SVG's currentColor fills the <text>; the link's color drives it. */
}

/* Variants — Ink-Blue accent state, paper-on-ink reversed state.
   When the inline SVG renders, "accent" and "reversed" simply swap the
   link wrapper's color (and, in the reversed case, the surrounding
   background). No background-image swap, no asset request. */
.solas-wordmark-link--accent   { color: var(--accent); }
.solas-wordmark-link--reversed {
  color: var(--solas-paper);
  background: var(--accent);
  padding: var(--space-2) var(--space-3);
}

/* ============================================================
   Rules + dividers
   ============================================================ */

hr, .rule { border: 0; border-top: var(--rule-hairline); margin: var(--space-6) 0; }
.rule--ink    { border-top: var(--rule-ink); }
.rule--accent { border-top: var(--rule-accent); }

/* ============================================================
   Links — quiet, ink-coloured underline by default.
   The accent is reserved for primary CTAs and editorial punctuation.
   ============================================================ */

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--accent); }