/* =============================================================
   Joshua Mitchell · Forest & Stone
   Brand tokens · v1 · May 2026
   ----------------------------------------------------------------
   Drop this file next to any HTML and link it:
       <link rel="stylesheet" href="brand.css">
   Every element inherits the palette + type stack automatically.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@300;400;500&family=Inter+Tight:wght@400;500;600;700&display=swap');

:root {
  /* ---- Palette ------------------------------------------------ */
  --forest:       #0F3D2E;   /* primary  · headlines, brand colour */
  --forest-deep:  #0A2A20;   /* hover, depth, body ink on linen    */
  --stone:        #8C8475;   /* partner  · captions, dividers       */
  --linen:        #ECE9E1;   /* surface  · default background       */
  --soft-black:   #1A1A18;   /* ink      · max-contrast text        */
  --sage:         #C9D6C5;   /* healing  · sparing, CF-coded posts  */

  /* ---- Type --------------------------------------------------- */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-italic:  'Instrument Serif', Georgia, serif;
  --font-body:    'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- Scale (modular, 1.25 ratio) ---------------------------- */
  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 16px;
  --t-md:   18px;
  --t-lg:   22px;
  --t-xl:   28px;
  --t-2xl:  36px;
  --t-3xl:  48px;
  --t-4xl:  64px;
  --t-5xl:  88px;

  /* ---- Space (8pt grid) --------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;

  /* ---- Radii & rules ------------------------------------------ */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --rule: 1px solid rgba(10, 42, 32, 0.15);
}

/* ----- Base ---------------------------------------------------- */
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--linen);
  color: var(--forest-deep);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----- Type defaults ------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--forest-deep);
  letter-spacing: -0.015em;
  line-height: 1;
  margin: 0 0 var(--s-4);
}
h1 { font-size: var(--t-5xl); line-height: 0.95; }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-2xl); }
h4 { font-size: var(--t-xl); }

em, .italic {
  font-family: var(--font-italic);
  font-style: italic;
}

p { margin: 0 0 var(--s-3); max-width: 68ch; }

a {
  color: var(--forest);
  text-decoration-color: rgba(15, 61, 46, 0.35);
  text-underline-offset: 3px;
}
a:hover { color: var(--forest-deep); text-decoration-color: var(--forest); }

small, .caption {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

hr { border: 0; border-top: var(--rule); margin: var(--s-5) 0; }

/* ----- Utility classes ---------------------------------------- */
.bg-forest    { background: var(--forest);     color: var(--linen); }
.bg-linen     { background: var(--linen);      color: var(--forest-deep); }
.bg-ink       { background: var(--soft-black); color: var(--linen); }
.bg-sage      { background: var(--sage);       color: var(--forest-deep); }

.text-forest  { color: var(--forest); }
.text-stone   { color: var(--stone); }
.text-ink     { color: var(--soft-black); }
.text-sage    { color: var(--sage); }

.display { font-family: var(--font-display); }
.body    { font-family: var(--font-body); }
.mono    { font-family: var(--font-mono); letter-spacing: 0.04em; }

.label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s-7) var(--s-5);
}

/* ----- Selection / focus -------------------------------------- */
::selection { background: var(--forest); color: var(--linen); }
:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }