/*
 * Mugo Works design tokens.
 *
 * Mirrored from the authoritative Mugo Works Brand Design System skill
 * (.claude/skills/mugo-works-design/tokens/*.css and readme.md's VISUAL FOUNDATIONS section) —
 * not from mugo-works-design-brief.zip, which the skill's own IMPORT-NOTES.md labels read-only
 * upstream context, not a build source. Every custom property below is the skill's own token,
 * renamed with the `--mw-` prefix so any Mugo Works surface under site/ reads a token instead of
 * a literal hex, font, spacing, or effect value. See
 * docs/adr/2026-08-27-mugo-works-design-token-layer.md for the naming rationale and its
 * amendment recording this correction.
 */

:root {
  /* ---- colors.css: base grounds ---- */
  --mw-ground-base: #0f130f;      /* near-black, primary surface */
  --mw-ground-panel: #141a14;     /* raised panel */
  --mw-ground-green: #1e4d30;     /* deep pine surface, brand moments only */
  /* colors.css: hairlines */
  --mw-border-base: #26302a;
  --mw-border-on-green: #2f6a44;
  --mw-border-on-green-strong: #3b7a52;
  /* colors.css: text */
  --mw-text-bright: #ece9df;      /* headings, emphasis (never pure #fff next to text) */
  --mw-text-body: #a8b0a2;
  /* Raised from the skill's own #6d766c (~3.98:1, below WCAG AA) to clear 4.5:1 against
   * --mw-ground-base while keeping the dim tone's whispered register — see mugoworks-u8f, whose
   * fix this rebuild preserves onto the correctly-sourced token name. */
  --mw-text-dim: #8a938a;
  --mw-text-body-on-green: #c3d6c6;
  /* colors.css: accents */
  --mw-accent-green: #56c176;     /* interactive, important, logo ink on dark */
  --mw-accent-green-bright: #7ad695;  /* green accent on green surface; link hover */
  --mw-accent-amber: #e0a340;     /* eyebrows, badges, secondary labels. accent only, never identity */
  --mw-accent-amber-bright: #ecc06a;
  /* colors.css: on-accent */
  --mw-text-on-green-button: #0f130f;
  /* colors.css: logo inks */
  --mw-logo-ink-dark-ground: #56c176;
  --mw-logo-ink-green-ground: #ffffff;
  --mw-logo-ink-light-ground: #1e4d30;
  --mw-logo-tile: #56c176;
  --mw-logo-ink-tile: #0f130f;
  /* colors.css: semantic aliases */
  --mw-surface-page: var(--mw-ground-base);
  --mw-surface-card: var(--mw-ground-panel);
  --mw-surface-brand-moment: var(--mw-ground-green);
  --mw-text-heading: var(--mw-text-bright);
  --mw-interactive: var(--mw-accent-green);
  --mw-interactive-hover: var(--mw-accent-green-bright);

  /* ---- fonts.css ----
   * fonts.css itself declares no custom properties — it is a Google Fonts @import for Space
   * Grotesk + Space Mono. site/index.html loads the same two families via a <link> tag instead
   * of duplicating the @import here; the font-family stacks below (from typography.css) are the
   * tokens that reference those families. */

  /* ---- typography.css ---- */
  --mw-font-display: 'Space Grotesk', system-ui, sans-serif; /* speaking voice: headlines, body, buttons */
  --mw-font-mono: 'Space Mono', monospace;                   /* workshop voice: labels, status, meta */
  /* scale (1440 reference) */
  --mw-type-hero: 128px;        --mw-lh-hero: 0.96;  --mw-track-hero: -0.045em;
  --mw-type-h2: 56px;           --mw-lh-h2: 1.05;    --mw-track-h2: -0.03em;
  --mw-type-h2-small: 52px;
  --mw-type-statement: 46px;    --mw-lh-statement: 1.1; --mw-track-statement: -0.025em;
  --mw-type-lead: 30px;         --mw-lh-lead: 1.45;
  --mw-type-h3: 26px;
  --mw-type-mono-subline: 22px;
  --mw-type-body-xl: 21px;      --mw-type-body-lg: 19px;  --mw-lh-body: 1.65;
  --mw-type-benefit: 18px;      --mw-lh-benefit: 1.5;
  --mw-type-body: 16px;
  --mw-type-mono-label: 13px;   --mw-track-label: 0.2em;  /* UPPERCASE */
  --mw-type-mono-micro: 13px;
  --mw-weight-bold: 700; --mw-weight-medium: 500; --mw-weight-regular: 400;

  /* ---- spacing.css ---- */
  --mw-page-margin: 110px;        /* at 1440; ~7.6% of width */
  --mw-section-pad-y: 110px;      /* 90–130px range */
  --mw-card-pad: 34px 36px;
  --mw-card-gap: 28px;
  --mw-stack-gap: 20px;           /* heading-to-copy stacks */
  --mw-row-pad-y: 34px;           /* belief/statement rows */
  --mw-nav-pad: 30px 110px;

  /* ---- effects.css ---- */
  --mw-radius-card: 10px;         /* cards 10–12px */
  --mw-radius-panel: 12px;
  --mw-radius-button: 6px;
  --mw-radius-none: 0;            /* badges, logo tile: sharp */
  --mw-hairline: 1px solid var(--mw-border-base);
  --mw-hairline-on-green: 1px solid var(--mw-border-on-green);
  --mw-contour-opacity-subtle: 0.08;  /* topo contour lines on dark */
  --mw-contour-opacity-on-green: 0.16;
  --mw-badge-rotation: 3deg;
  /* no gradients, no drop shadows, no blur in this brand */
}