/* ------------------------------------------------------------------------
   ThriveFSM brand: shared stylesheet.

   Chosen by Tom on 22 October 2026, replacing v2.0 (stone, brass, navy).
   The decision and its reasons are in docs/decisions/0002-thrivefsm-brand.md.

   Loaded first by the ThriveFSM site, before its own site.css. It holds the
   tokens and the few rules that should look the same on anything carrying
   the brand. thri5.co.uk does not load it.

   House rules this file enforces:
   - Ember is ThriveFSM's own colour. Bright ember (#F26A2E) on dark
     surfaces and as a fill; deep ember (#AE4C21) for text on light, because
     bright ember is only about 3:1 against white.
   - Graphite top and footer; pale cool-grey bands between them, where the
     colour change is the divider.
   - Manrope 600 for display, Geist for body, Geist Mono for small labels.
     Bricolage Grotesque only in the wordmark.
   - "ThriveFSM" is one word, with FSM in ember.
   - Force light: every colour is explicit and coloured surfaces are
     painted as same-colour gradients, which device force-dark cannot
     invert.
   ------------------------------------------------------------------------ */

:root {
  color-scheme: only light;

  --graphite:       #141619;   /* top band and footer */
  --graphite-line:  #2C3035;   /* rules on graphite */
  --graphite-edge:  #3A3F45;   /* outlines on graphite */
  --on-dark:        #ECEAE6;
  --on-dark-muted:  #A2A5AA;
  --on-dark-faint:  #8E9297;

  --paper:          #F5F6F8;   /* main band */
  --band:           #ECEEF1;   /* alternate band */
  --card:           #FFFFFF;
  --ink:            #121212;
  --muted:          #5C5C58;   /* secondary text on paper */
  --muted-band:     #4F5653;   /* secondary text on the alternate band */
  --hair:           #D9DDE3;
  --hair-band:      #D2D7DE;

  --ember:          #F26A2E;   /* on dark, fills, marks */
  --ember-text:     #AE4C21;   /* text on light */

  --display:  "Manrope", "Helvetica Neue", Arial, sans-serif;
  --body:     "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono:     "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  --wordmark: "Bricolage Grotesque", "Manrope", sans-serif;

  --wrap:    1120px;
  --gutter:  clamp(20px, 5vw, 64px);
  --measure: 58ch;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: linear-gradient(var(--paper), var(--paper));
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ol, ul, figure { margin: 0; }

h1, h3, .statement {
  font-family: var(--display);
  font-weight: 600;
  text-wrap: balance;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left:  max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* Small uppercase labels share one style. */
.kicker, .label, .mono-label {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The wordmark: one word, FSM in ember. */
.wordmark {
  font-family: var(--wordmark);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.wordmark span { color: var(--ember); }

/* Heading emphasis is by colour, never italic. */
.accent { color: var(--ember-text); }

.btn {
  display: inline-block;
  background: linear-gradient(var(--ember), var(--ember));
  color: var(--graphite);
  font-weight: 600;
  padding: 15px 24px;
  text-decoration: none;
}
.btn:hover { filter: brightness(1.06); }