/* tokens.css — the Token file (GLOSSARY.md): the single source of this site's design values.
 *
 * Tiers (research 03 §3.1):
 *   1. Primitives  --mf-<hue>[-<step>]  raw values, named by what they are. Never used by component CSS.
 *   2. Semantics   --mf-color-*, --mf-space-*, --mf-text-*, --mf-heading-*, --mf-radius-* …  named by role.
 *                  The only tier component CSS may use (enforced by stylelint, W1 C2). The lint tells the
 *                  tiers apart BY PREFIX: a semantic name starts --mf-color|space|section|text|heading|
 *                  radius|content|duration|gutter|shadow|font|gradient|label|ease; anything else is a primitive
 *                  (tools/stylelint-known-vars.mjs SEMANTIC). Name new tokens accordingly.
 *   3. Component tokens live on their own block class, not here.
 *
 * Today these carry ACSS 3.3.8's exact values (W1 C1, decision-log E7), so the generated ACSS bridge
 * (dist/tokens/acss-bridge.css) changes nothing on first install. A restyle edits tier 1 or 2 here.
 * tools/build-tokens.mjs refuses to build if a bridged ACSS name no longer resolves to the value
 * recorded in tokens/acss-snapshot.json, so drift is a deliberate act, never an accident.
 *
 * Units: 1rem = 10px. ACSS sets html { font-size: 62.5% } and every size below assumes it; a page
 * that loads these tokens without ACSS must set the same root size.
 *
 * Hue names for the brand families: steel = ACSS primary (#3994c1), forest = action, slate =
 * secondary, ink = base, violet = accent. ACSS's "shade" family is the same ramp as "neutral".
 * Tints stay literal rgba() for now: color-mix() would compute to a different serialisation and break
 * the zero computed-style diff that gates the first install (W1 C4).
 */

:root {
  /* 1. Primitives */
  --mf-violet: #653cad;
  --mf-violet-dark: #37215f;
  --mf-violet-light: #d4c6eb;
  --mf-violet-semi-light: #9a7bd1;
  --mf-violet-ultra-light: #f1ecf8;

  --mf-forest: #3f9142;
  --mf-forest-hover: #49a74c;
  --mf-forest-light: #cae8cb;
  --mf-forest-ultra-dark-trans-60: rgba(16, 35, 16, 0.6);
  --mf-forest-ultra-light: #edf7ee;

  --mf-ink-dark: #30404f;
  --mf-ink-light: #d0d9e2;
  --mf-ink-semi-light: #90a6bb;
  --mf-ink-ultra-dark: #131920;
  --mf-ink-ultra-light: #eff2f5;

  --mf-black: #000;
  --mf-black-trans-10: rgba(0, 0, 0, 0.1);
  --mf-black-trans-20: rgba(0, 0, 0, 0.2);
  --mf-black-trans-60: rgba(0, 0, 0, 0.6);

  --mf-danger: #DC3545;
  --mf-danger-light: #f4bec3;

  --mf-info-dark: #093c44;
  --mf-info-light: #bbeef6;
  --mf-info-trans-10: rgba(24, 162, 184, 0.1);
  --mf-info-ultra-dark: #06282d;

  --mf-neutral: #000000;
  --mf-neutral-dark: #404040;
  --mf-neutral-dark-trans-10: rgba(64, 64, 64, 0.1);
  --mf-neutral-dark-trans-20: rgba(64, 64, 64, 0.2);
  --mf-neutral-dark-trans-30: rgba(64, 64, 64, 0.3);
  --mf-neutral-light: #d9d9d9;
  --mf-neutral-light-trans-10: rgba(217, 217, 217, 0.1);
  --mf-neutral-light-trans-20: rgba(217, 217, 217, 0.2);
  --mf-neutral-semi-dark: #595959;
  --mf-neutral-trans-80: rgba(0, 0, 0, 0.8);
  --mf-neutral-ultra-dark: #1a1a1a;
  --mf-neutral-ultra-dark-trans-10: rgba(26, 26, 26, 0.1);
  --mf-neutral-ultra-dark-trans-40: rgba(26, 26, 26, 0.4);
  --mf-neutral-ultra-dark-trans-70: rgba(26, 26, 26, 0.7);
  --mf-neutral-ultra-dark-trans-80: rgba(26, 26, 26, 0.8);
  --mf-neutral-ultra-light: #f2f2f2;

  --mf-steel: #3994c1;
  --mf-steel-dark: #1d4b62;
  --mf-steel-hover: #54a4cc;
  --mf-steel-light: #c4e0ed;
  --mf-steel-semi-dark: #296989;
  --mf-steel-semi-light: #76b6d6;
  --mf-steel-trans-70: rgba(57, 148, 193, 0.7);
  --mf-steel-trans-80: rgba(57, 148, 193, 0.8);
  --mf-steel-ultra-dark: #0c1e27;
  --mf-steel-ultra-light: #ebf5f9;

  --mf-slate: #606e7c;
  --mf-slate-dark: #374048;
  --mf-slate-light: #d4d9de;
  --mf-slate-medium: #6f7f90;
  --mf-slate-semi-dark: #4e5965;
  --mf-slate-semi-light: #9aa6b1;
  --mf-slate-ultra-dark: #16191d;
  --mf-slate-ultra-light: #f1f2f4;

  --mf-success-light: #c1f0cc;

  --mf-warning-light: #ffecb3;

  --mf-white: #fff;
  --mf-white-trans-10: rgba(255, 255, 255, 0.1);
  --mf-white-trans-50: rgba(255, 255, 255, 0.5);
  --mf-white-trans-60: rgba(255, 255, 255, 0.6);
  --mf-white-trans-80: rgba(255, 255, 255, 0.8);

  /* 2. Semantics */
  --mf-color-action: var(--mf-forest);
  --mf-color-action-hover: var(--mf-forest-hover);
  --mf-color-surface-inverse: var(--mf-neutral-ultra-dark);
  --mf-color-surface-alt: var(--mf-neutral-ultra-light);
  --mf-color-surface: var(--mf-white);
  --mf-color-text: var(--mf-black);
  --mf-content-width: 136.6rem;
  --mf-color-accent: var(--mf-steel);
  --mf-color-accent-hover: var(--mf-steel-hover);
  --mf-radius: var(--mf-radius-m);
  --mf-radius-l: 1.5rem;
  --mf-radius-m: 1rem;
  --mf-radius-s: 0.6666666667rem;
  --mf-radius-xl: 2.25rem;
  --mf-color-text-muted: var(--mf-neutral-dark);
  --mf-color-text-inverse: var(--mf-white);
  --mf-duration-ui: 0.3s;
}

/* 2. Semantics: the fluid type and space scales. Same @supports/@media structure and order as ACSS,
   so the cascade picks the same value at every viewport. */
:root {
  --mf-gutter: 1.6rem;
  --mf-heading-1: 2.565rem;
  --mf-heading-2: 2.28rem;
  --mf-heading-3: 2.025rem;
  --mf-heading-4: 1.8rem;
  --mf-section-padding-x: 1.6rem;
  --mf-section-space-l: 7.5rem;
  --mf-section-space-m: 6rem;
  --mf-section-space-s: 4.8rem;
  --mf-section-space-xl: 9.375rem;
  --mf-section-space-xs: 3.84rem;
  --mf-space-l: 2.7rem;
  --mf-space-m: 2.4rem;
  --mf-space-s: 2.133rem;
  --mf-space-xl: 3.038rem;
  --mf-space-xs: 1.896rem;
  --mf-space-xxl: 3.42rem;
  --mf-text-l: 2.025rem;
  --mf-text-m: 1.8rem;
  --mf-text-s: 1.42rem;
  --mf-text-xl: 2.28rem;
  --mf-text-xs: 1.26rem;
  --mf-text-xxl: 2.565rem;
}

@supports (padding: calc(1vw + 2vw)) {
  :root {
    --mf-gutter: calc(1.6rem + (4.4 * ((100vw - 32rem) / 104.6)));
    --mf-section-padding-x: calc(1.6rem + (4.4 * ((100vw - 32rem) / 104.6)));
    --mf-section-space-l: calc(6.3984rem + (7.1016 * ((100vw - 32rem) / 104.6)));
    --mf-section-space-m: calc(4.8rem + (4.2 * ((100vw - 32rem) / 104.6)));
    --mf-section-space-s: calc(3.6009002251rem + (2.3990997749 * ((100vw - 32rem) / 104.6)));
    --mf-section-space-xl: calc(8.5290672rem + (11.7209328 * ((100vw - 32rem) / 104.6)));
    --mf-section-space-xs: calc(2.7013505064rem + (1.2986494936 * ((100vw - 32rem) / 104.6)));
    --mf-space-l: calc(3.1992rem + (1.3008 * ((100vw - 32rem) / 104.6)));
    --mf-space-m: calc(2.4rem + (0.6 * ((100vw - 32rem) / 104.6)));
    --mf-space-s: calc(1.8004501125rem + (0.1995498875 * ((100vw - 32rem) / 104.6)));
    --mf-space-xl: calc(4.2645336rem + (2.4854664 * ((100vw - 32rem) / 104.6)));
    --mf-space-xs: calc(1.3506752532rem + (-0.0173419199 * ((100vw - 32rem) / 104.6)));
    --mf-space-xxl: calc(5.6846232888rem + (4.4403767112 * ((100vw - 32rem) / 104.6)));
  }
}

@supports (padding: calc(1vw + 2vw)) {
  @media (min-width: 1281px) {
    :root {
      --mf-gutter: 6rem;
      --mf-section-padding-x: 6rem;
      --mf-section-space-l: 13.5rem;
      --mf-section-space-m: 9rem;
      --mf-section-space-s: 6rem;
      --mf-section-space-xl: 20.25rem;
      --mf-section-space-xs: 4rem;
      --mf-space-l: 4.5rem;
      --mf-space-m: 3rem;
      --mf-space-s: 2rem;
      --mf-space-xl: 6.75rem;
      --mf-space-xs: 1.3333333333rem;
      --mf-space-xxl: 10.125rem;
    }
  }
}

@supports (padding: clamp(1vw, 2vw, 3vw)) {
  :root {
    --mf-gutter: clamp(1.6rem, calc(4.206500956vw + 0.2539196941rem), 6rem);
    --mf-section-padding-x: clamp(1.6rem, calc(4.206500956vw + 0.2539196941rem), 6rem);
    --mf-section-space-l: clamp(6.3984rem, calc(6.789292543vw + 4.2258263862rem), 13.5rem);
    --mf-section-space-m: clamp(4.8rem, calc(4.0152963671vw + 3.5151051625rem), 9rem);
    --mf-section-space-s: clamp(3.6009002251rem, calc(2.2935944311vw + 2.8669500071rem), 6rem);
    --mf-section-space-xl: clamp(8.5290672rem, calc(11.2054806883vw + 4.9433133797rem), 20.25rem);
    --mf-section-space-xs: clamp(2.7013505064rem, calc(1.2415387128vw + 2.3040581183rem), 4rem);
    --mf-space-l: clamp(3.1992rem, calc(1.2435946463vw + 2.8012497132rem), 4.5rem);
    --mf-space-m: clamp(2.4rem, calc(0.5736137667vw + 2.2164435946rem), 3rem);
    --mf-space-s: clamp(1.8004501125rem, calc(0.190774271vw + 1.7394023458rem), 2rem);
    --mf-space-xl: clamp(4.2645336rem, calc(2.3761629063vw + 3.50416147rem), 6.75rem);
    --mf-space-xs: clamp(1.3506752532rem, calc(-0.0165792733vw + 1.3559806207rem), 1.3333333333rem);
    --mf-space-xxl: clamp(5.6846232888rem, calc(4.2451020184vw + 4.3261906429rem), 10.125rem);
  }
}

@supports (font-size: calc(1vw + 2vw)) {
  :root {
    --mf-heading-1: calc(2.7648rem + (3.9852 * ((100vw - 32rem) / 104.6)));
    --mf-heading-2: calc(2.304rem + (2.196 * ((100vw - 32rem) / 104.6)));
    --mf-heading-3: calc(1.92rem + (1.08 * ((100vw - 32rem) / 104.6)));
    --mf-heading-4: calc(1.6rem + (0.4 * ((100vw - 32rem) / 104.6)));
    --mf-text-l: calc(1.92rem + (0.4794 * ((100vw - 32rem) / 104.6)));
    --mf-text-m: calc(1.6rem + (0.2 * ((100vw - 32rem) / 104.6)));
    --mf-text-s: calc(1.4rem + (0.2 * ((100vw - 32rem) / 104.6)));
    --mf-text-xl: calc(2.304rem + (0.8944002 * ((100vw - 32rem) / 104.6)));
    --mf-text-xs: calc(1.3rem + (0.1 * ((100vw - 32rem) / 104.6)));
    --mf-text-xxl: calc(2.7648rem + (1.4986674666 * ((100vw - 32rem) / 104.6)));
  }
}

@supports (font-size: calc(1vw + 2vw)) {
  @media (min-width: 1281px) {
    :root {
      --mf-heading-1: 6.75rem;
      --mf-heading-2: 4.5rem;
      --mf-heading-3: 3rem;
      --mf-heading-4: 2rem;
      --mf-text-l: 2.3994rem;
      --mf-text-m: 1.8rem;
      --mf-text-s: 1.6rem;
      --mf-text-xl: 3.1984002rem;
      --mf-text-xs: 1.4rem;
      --mf-text-xxl: 4.2634674666rem;
    }
  }
}

@supports (font-size: clamp(1vw, 2vw, 3vw)) {
  :root {
    --mf-heading-1: clamp(2.7648rem, calc(3.8099426386vw + 1.5456183556rem), 6.75rem);
    --mf-heading-2: clamp(2.304rem, calc(2.0994263862vw + 1.6321835564rem), 4.5rem);
    --mf-heading-3: clamp(1.92rem, calc(1.0325047801vw + 1.5895984704rem), 3rem);
    --mf-heading-4: clamp(1.6rem, calc(0.3824091778vw + 1.4776290631rem), 2rem);
    --mf-text-l: clamp(1.92rem, calc(0.4583173996vw + 1.7733384321rem), 2.3994rem);
    --mf-text-m: clamp(1.6rem, calc(0.1912045889vw + 1.5388145315rem), 1.8rem);
    --mf-text-s: clamp(1.4rem, calc(0.1912045889vw + 1.3388145315rem), 1.6rem);
    --mf-text-xl: clamp(2.304rem, calc(0.8550671128vw + 2.0303785239rem), 3.1984002rem);
    --mf-text-xs: clamp(1.3rem, calc(0.0956022945vw + 1.2694072658rem), 1.4rem);
    --mf-text-xxl: clamp(2.7648rem, calc(1.4327604843vw + 2.306316645rem), 4.2634674666rem);
  }
}