/* Design tokens. Colour, type, space, and border values only.

   Deep green-black is the default ground (:root) — a light parchment
   alternate is kept under [data-theme="light"] in case it's ever wanted.
   See ARCHITECTURE.md if you want the full design rationale. Everything
   that consumes color should read the semantic aliases at the bottom
   (--color-text, --color-link, etc.) rather than the raw scale. */

:root {
  /* === Fonts === */
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* === Type scale === */
  --text-2xs: 0.6875rem;  /* 11px — faint metadata */
  --text-xs: 0.75rem;     /* 12px — timestamps, labels */
  --text-sm: 0.8125rem;   /* 13px — dense nav/list text */
  --text-base: 0.875rem;  /* 14px — homepage body default */
  --text-md: 1rem;        /* 16px */
  --text-lg: 1.125rem;    /* 18px — post body */
  --text-xl: 1.375rem;    /* 22px — module/section headers */
  --text-2xl: 1.75rem;    /* 28px — page title */
  --text-3xl: 2.5rem;     /* 40px — hero/grid-break title, used sparingly */

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7; /* post body */

  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.09em; /* small-caps header bars */

  /* === Space scale === */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */

  /* === Borders === */
  --border-hair: 1px;
  --border-thick: 2px;
  --radius: 2px;   /* hard cap — never exceed this */
  --radius-0: 0px;

  /* === Color scale: deep green-black (default ground) === */
  --color-bg: #0f130d;
  --color-surface: #171c13;
  --color-surface-2: #1f2518;

  --color-ink: #ddd5bc;
  --color-ink-dim: #9a9c81;
  --color-ink-faint: #6d7059;

  --color-border: #333c29;
  --color-border-strong: #4b5638;

  --color-pine: #9cba8d;
  --color-moss: #85a271;
  --color-olive: #a8ac79;

  --color-accent: #d78a51;
  --color-accent-hover: #eba066;
  --color-accent-wash: rgba(215, 138, 81, 0.14);
}

[data-theme="light"] {
  /* Round 4 rebuilt the hue distribution (see ARCHITECTURE.md item 10
     for the full rounds 1-4 history) — everleaf confirmed that fixed
     the "yellow website" problem but asked for more contrast overall.
     Round 5 keeps every hue from round 4 and just deepens the
     structural tiers: border/border-strong are darker and clear a
     comfortable 3:1+ against both surface and bg now (previously
     bordering on that threshold rather than clearing it), ink-dim
     darkened for more legible secondary text, and surface pushed a
     touch whiter. bg/ink/pine/accent untouched — those were already
     doing their job. */
  --color-bg: #efe8d6;
  --color-surface: #fdfcf6;
  --color-surface-2: #ded1a4;

  --color-ink: #1a251b;
  --color-ink-dim: #464c3a;
  --color-ink-faint: #72765f;

  --color-border: #837d55;
  --color-border-strong: #47432b;

  --color-pine: #2c4a30;
  --color-moss: #6d8a5a;
  --color-olive: #8c8a5e;

  --color-accent: #a1512f;
  --color-accent-hover: #66321b;
  --color-accent-wash: rgba(161, 81, 47, 0.12);
}

:root {
  /* === Semantic aliases — build against these, not the raw scale === */
  --color-page-bg: var(--color-bg);
  --color-panel-bg: var(--color-surface);
  --color-header-bar-bg: var(--color-surface-2);
  --color-panel-border: var(--color-border);
  --color-panel-border-strong: var(--color-border-strong);

  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink-dim);
  --color-text-faint: var(--color-ink-faint);
  --color-heading: var(--color-pine);

  --color-link: var(--color-accent);
  --color-link-hover: var(--color-accent-hover);
  --color-accent-fill: var(--color-accent-wash);

  /* === Ornament ===
     The site's own mark, not a UI icon: a fleuron (a leaf/floral
     dingbat used in book typography for section breaks) stands in for
     illustrated foliage, per the "leaves as glyph" brief. Treating it
     as a token, not a hardcoded character in markup, means the whole
     site's identity mark lives in one place. */
  --mark-fleuron: "\2766"; /* ❦ FLORAL HEART */
}