/* Meadowmark — Material Design 3 tokens.
 *
 * This is a REAL M3 tonal system: five reference palettes (primary /
 * secondary / tertiary / neutral / neutral-variant, each a 0-100 tonal
 * ramp — see design/tools/generate-tonal-palettes.py for how the hex
 * values were derived) with the standard M3 roles assigned from them.
 * Error uses its own ramp. The ramps are HSL-based, not the real HCT
 * colour space material-color-utilities uses — documented honestly, not
 * passed off as pixel-identical to Google's tooling.
 *
 * THEMING RULE — read before touching this file:
 *   The COMPLETE light palette lives as plain values on bare :root.
 *   Dark values are layered TWICE: once for automatic
 *   prefers-color-scheme, guarded so an explicit light choice always
 *   wins, and again for an explicit [data-theme="dark"] toggle, so the
 *   toggle wins in both directions. A token defined ONLY inside a media
 *   query or a [data-theme] block is a token that renders as nothing for
 *   the theme that never got it — that was the site's actual bug before
 *   this pass (see CHANGELOG / commit history), and every value below is
 *   present on bare :root first.
 *
 * WHY SURFACE-CONTAINER-* EXISTS AND IS NOT THE SAME AS --mm-bg:
 *   The page background (`--mm-bg`, aliased to the `surface` role) and a
 *   card's background MUST read as different tones or nothing on the
 *   page separates from anything else. `.mm-card` and friends bind to
 *   `--mm-surface-container` / `--mm-surface-container-high`, never to
 *   plain `--mm-surface` — that one binding decision is what fixes the
 *   "everything is one flat slab" defect this pass exists to correct.
 *
 * A handful of roles legitimately compute to the same hex within one
 * theme — that is correct, documented M3 behaviour, not a leftover bug:
 *   - on-primary / on-secondary / on-tertiary / on-error are all pure
 *     white in light mode, because each of their base colours (tone 35-
 *     40) is dark enough that white gives the best contrast. Same
 *     mechanism, four roles, one coincidental value.
 *   - scrim and shadow are both pure black — that is what those two
 *     roles are for.
 *   - surface / surface-bright coincide in light mode, and
 *     surface / surface-dim coincide in dark mode — this is the exact
 *     M3 baseline scheme (surface sits at the “bright” end of the ramp
 *     in light, and at the “dim” end in dark).
 * Everything the brief calls out by name — bg vs card, hero vs card,
 * primary vs accent, surface-variant vs outline-variant — is verified
 * DIFFERENT by design/tools/build-tokens.py's collision report.
 */
:root {
  /* ---- Primary: harvest green (crops, growth, the "grow a town" verb) ---- */
  --mm-primary: #3e844c;
  --mm-on-primary: #ffffff;
  --mm-primary-container: #dcefe0;
  --mm-on-primary-container: #102314;

  /* ---- Secondary: harvest gold (wheat, barns, sunlight) ---- */
  --mm-secondary: #94711e;
  --mm-on-secondary: #ffffff;
  --mm-secondary-container: #f6ecd5;
  --mm-on-secondary-container: #2a2009;

  /* ---- Tertiary: sky blue (weather, water, the mine's lantern glow) ---- */
  --mm-tertiary: #377195;
  --mm-on-tertiary: #ffffff;
  --mm-tertiary-container: #dae8f1;
  --mm-on-tertiary-container: #0e1c25;

  /* ---- Error (standard M3 warm red) ---- */
  --mm-error: #ad2d1f;
  --mm-on-error: #ffffff;
  --mm-error-container: #f7d7d4;
  --mm-on-error-container: #2b0b08;

  /* ---- Neutral surfaces: soil-tinted warm grey-green ---- */
  --mm-surface: #fafafa;
  --mm-on-surface: #191b18;
  --mm-surface-dim: #dde0dc;
  --mm-surface-bright: #fafafa;
  --mm-surface-container-lowest: #ffffff;
  --mm-surface-container-low: #f5f6f4;
  --mm-surface-container: #eff1ef;
  --mm-surface-container-high: #eaece9;
  --mm-surface-container-highest: #e5e7e4;
  --mm-inverse-surface: #32372f;
  --mm-inverse-on-surface: #f2f3f1;
  --mm-inverse-primary: #badec1;

  /* ---- Neutral-variant: outlines and muted on-surface text ---- */
  --mm-surface-variant: #e4e9e2;
  --mm-on-surface-variant: #495643;
  --mm-outline: #7a906f;
  --mm-outline-variant: #cad3c5;

  --mm-scrim: #000000;
  --mm-shadow: #000000;
  --mm-surface-tint: var(--mm-primary);

  /* ---- bg / on-bg are the deprecated-in-name-only M3 "background"
     role — it is, correctly, an alias of surface / on-surface. What
     actually separates the page from its cards is that cards use
     surface-container*, never plain surface. See the note above. ---- */
  --mm-bg: var(--mm-surface);
  --mm-on-bg: var(--mm-on-surface);

  /* ---- Accent: a distinct, user-customizable highlight tone within the
     primary hue family (wired to badges, the palette flash, selected-tab
     rail and focus accents). It defaults to a DIFFERENT tone than
     --mm-primary on purpose — the previous tokens.css hard-aliased
     --mm-accent to --mm-primary, which made "customize your accent
     colour" a setting that visibly changed nothing. theme.js still
     overrides this with setProperty()/removeProperty() for a user pick;
     removing the override now falls back to this distinct default
     rather than back to primary. ---- */
  --mm-accent: #63b673;
  /* dark green reads >=6.6:1 against both the light and dark
     accent tone above, so one on-accent value covers both themes. */
  --mm-on-accent: #102314;

  /* ---- Elevation: real shadows (levels 0-5), M3 umbra+penumbra pairs.
     Paired with the surface-container tone steps above, which do the
     job of M3's "surface tint" overlay for resting elevation — a
     genuinely distinct tone at every level, not a repaint of the same
     colour with a fake shadow on top. ---- */
  --mm-elevation-0: none;
  --mm-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, .30), 0 1px 3px 1px rgba(0, 0, 0, .15);
  --mm-elevation-2: 0 1px 2px 0 rgba(0, 0, 0, .30), 0 2px 6px 2px rgba(0, 0, 0, .15);
  --mm-elevation-3: 0 1px 3px 0 rgba(0, 0, 0, .30), 0 4px 8px 3px rgba(0, 0, 0, .15);
  --mm-elevation-4: 0 1px 3px 0 rgba(0, 0, 0, .30), 0 6px 10px 4px rgba(0, 0, 0, .15);
  --mm-elevation-5: 0 1px 3px 0 rgba(0, 0, 0, .30), 0 8px 12px 6px rgba(0, 0, 0, .15);
  /* legacy alias names kept because base.css/components.css/JS still read
     them; equal to the elevation levels above. */
  --mm-elev-1: var(--mm-elevation-1);
  --mm-elev-2: var(--mm-elevation-2);
  --mm-elev-3: var(--mm-elevation-3);

  /* ---- Shape scale ---- */
  --mm-radius-none: 0px;
  --mm-radius-xs: 4px;
  --mm-radius-sm: 8px;
  --mm-radius-md: 12px;
  --mm-radius-lg: 16px;
  --mm-radius-xl: 28px;
  --mm-radius-full: 999px;

  /* ---- Spacing scale (4px grid) ---- */
  --mm-space-1: 4px;
  --mm-space-2: 8px;
  --mm-space-3: 12px;
  --mm-space-4: 16px;
  --mm-space-5: 24px;
  --mm-space-6: 32px;
  --mm-space-7: 48px;
  --mm-space-8: 64px;

  /* ---- Motion: durations (ms) and standard/emphasized easings ---- */
  --mm-motion: 1;
  --mm-dur-short-1: 50ms;
  --mm-dur-short-2: 100ms;
  --mm-dur-short-3: 150ms;
  --mm-dur-short-4: 200ms;
  --mm-dur-medium-1: 250ms;
  --mm-dur-medium-2: 300ms;
  --mm-dur-medium-3: 350ms;
  --mm-dur-medium-4: 400ms;
  --mm-dur-long-1: 450ms;
  --mm-dur-long-2: 500ms;
  --mm-dur-long-3: 550ms;
  --mm-dur-long-4: 600ms;
  --mm-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --mm-ease-standard-decel: cubic-bezier(0, 0, 0, 1);
  --mm-ease-standard-accel: cubic-bezier(.3, 0, 1, 1);
  --mm-ease-emphasized: cubic-bezier(.3, 0, .8, .15);
  --mm-ease-emphasized-decel: cubic-bezier(.05, .7, .1, 1);
  --mm-ease-emphasized-accel: cubic-bezier(.3, 0, .8, .15);

  /* ---- State-layer opacities (hover/focus/pressed/dragged overlays) ---- */
  --mm-state-hover: .08;
  --mm-state-focus: .10;
  --mm-state-pressed: .12;
  --mm-state-dragged: .16;

  /* ---- Type scale: full M3 scale (size / line-height / weight / tracking) ---- */
  --mm-type-display-lg-size: 3.5625rem;  /* 57px */
  --mm-type-display-lg-line: 4rem;       /* 64px */
  --mm-type-display-lg-weight: 400;
  --mm-type-display-lg-tracking: -0.25px;
  --mm-type-display-md-size: 2.8125rem;  /* 45px */
  --mm-type-display-md-line: 3.25rem;    /* 52px */
  --mm-type-display-md-weight: 400;
  --mm-type-display-md-tracking: 0px;
  --mm-type-display-sm-size: 2.25rem;    /* 36px */
  --mm-type-display-sm-line: 2.75rem;    /* 44px */
  --mm-type-display-sm-weight: 400;
  --mm-type-display-sm-tracking: 0px;

  --mm-type-headline-lg-size: 2rem;      /* 32px */
  --mm-type-headline-lg-line: 2.5rem;    /* 40px */
  --mm-type-headline-lg-weight: 400;
  --mm-type-headline-lg-tracking: 0px;
  --mm-type-headline-md-size: 1.75rem;   /* 28px */
  --mm-type-headline-md-line: 2.25rem;   /* 36px */
  --mm-type-headline-md-weight: 400;
  --mm-type-headline-md-tracking: 0px;
  --mm-type-headline-sm-size: 1.5rem;    /* 24px */
  --mm-type-headline-sm-line: 2rem;      /* 32px */
  --mm-type-headline-sm-weight: 400;
  --mm-type-headline-sm-tracking: 0px;

  --mm-type-title-lg-size: 1.375rem;     /* 22px */
  --mm-type-title-lg-line: 1.75rem;      /* 28px */
  --mm-type-title-lg-weight: 500;
  --mm-type-title-lg-tracking: 0px;
  --mm-type-title-md-size: 1rem;         /* 16px */
  --mm-type-title-md-line: 1.5rem;       /* 24px */
  --mm-type-title-md-weight: 500;
  --mm-type-title-md-tracking: .15px;
  --mm-type-title-sm-size: .875rem;      /* 14px */
  --mm-type-title-sm-line: 1.25rem;      /* 20px */
  --mm-type-title-sm-weight: 500;
  --mm-type-title-sm-tracking: .1px;

  --mm-type-body-lg-size: 1rem;          /* 16px */
  --mm-type-body-lg-line: 1.5rem;        /* 24px */
  --mm-type-body-lg-weight: 400;
  --mm-type-body-lg-tracking: .5px;
  --mm-type-body-md-size: .875rem;       /* 14px */
  --mm-type-body-md-line: 1.25rem;       /* 20px */
  --mm-type-body-md-weight: 400;
  --mm-type-body-md-tracking: .25px;
  --mm-type-body-sm-size: .75rem;        /* 12px */
  --mm-type-body-sm-line: 1rem;          /* 16px */
  --mm-type-body-sm-weight: 400;
  --mm-type-body-sm-tracking: .4px;

  --mm-type-label-lg-size: .875rem;      /* 14px */
  --mm-type-label-lg-line: 1.25rem;      /* 20px */
  --mm-type-label-lg-weight: 500;
  --mm-type-label-lg-tracking: .1px;
  --mm-type-label-md-size: .75rem;       /* 12px */
  --mm-type-label-md-line: 1rem;         /* 16px */
  --mm-type-label-md-weight: 500;
  --mm-type-label-md-tracking: .5px;
  --mm-type-label-sm-size: .6875rem;     /* 11px */
  --mm-type-label-sm-line: 1rem;         /* 16px */
  --mm-type-label-sm-weight: 500;
  --mm-type-label-sm-tracking: .5px;

  --mm-font-family: system-ui, -apple-system, "Segoe UI", "Segoe UI Variable", Roboto, "Noto Sans", "Noto Sans HK", "Microsoft JhengHei", "PingFang HK", Arial, sans-serif;
  --mm-font-scale: 1;
  --mm-density: 0;
  --mm-focus-ring: 3px solid #0b57d0;

  --mm-tab-size: 240px;
  --mm-header-h: 64px;

  /* legacy elevation-tone alias names some older component rules still
     use; map onto the new surface-container steps so nothing silently
     resolves to nothing. */
  --mm-surface-1: var(--mm-surface-container-low);
  --mm-surface-2: var(--mm-surface-container);
  --mm-surface-3: var(--mm-surface-container-high);
  --mm-surface-4: var(--mm-surface-container-highest);
  --mm-surface-5: var(--mm-surface-container-highest);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mm-primary: #badec1;
    --mm-on-primary: #214528;
    --mm-primary-container: #31683c;
    --mm-on-primary-container: #dcefe0;

    --mm-secondary: #eed9aa;
    --mm-on-secondary: #554011;
    --mm-secondary-container: #7f611a;
    --mm-on-secondary-container: #f6ecd5;

    --mm-tertiary: #b5d1e3;
    --mm-on-tertiary: #1c384a;
    --mm-tertiary-container: #295570;
    --mm-on-tertiary-container: #dae8f1;

    --mm-error: #f0afa8;
    --mm-on-error: #57160f;
    --mm-error-container: #822217;
    --mm-on-error-container: #f7d7d4;

    --mm-surface: #0f100e;
    --mm-on-surface: #e5e7e4;
    --mm-surface-dim: #0f100e;
    --mm-surface-bright: #3c4139;
    --mm-surface-container-lowest: #0a0b09;
    --mm-surface-container-low: #191b18;
    --mm-surface-container: #1e211c;
    --mm-surface-container-high: #2a2e28;
    --mm-surface-container-highest: #373c34;
    --mm-inverse-surface: #e5e7e4;
    --mm-inverse-on-surface: #32372f;
    --mm-inverse-primary: #3e844c;

    --mm-surface-variant: #495643;
    --mm-on-surface-variant: #cad3c5;
    --mm-outline: #95a68c;
    --mm-outline-variant: #627359;

    --mm-scrim: #000000;
    --mm-shadow: #000000;
    --mm-surface-tint: var(--mm-primary);

    --mm-bg: var(--mm-surface);
    --mm-on-bg: var(--mm-on-surface);
    --mm-accent: #90cb9c;
    --mm-on-accent: #102314;

    --mm-focus-ring: 3px solid #a8c8ff;

    --mm-surface-1: var(--mm-surface-container-low);
    --mm-surface-2: var(--mm-surface-container);
    --mm-surface-3: var(--mm-surface-container-high);
    --mm-surface-4: var(--mm-surface-container-highest);
    --mm-surface-5: var(--mm-surface-container-highest);
  }
}

:root[data-theme="dark"] {
  --mm-primary: #badec1;
  --mm-on-primary: #214528;
  --mm-primary-container: #31683c;
  --mm-on-primary-container: #dcefe0;

  --mm-secondary: #eed9aa;
  --mm-on-secondary: #554011;
  --mm-secondary-container: #7f611a;
  --mm-on-secondary-container: #f6ecd5;

  --mm-tertiary: #b5d1e3;
  --mm-on-tertiary: #1c384a;
  --mm-tertiary-container: #295570;
  --mm-on-tertiary-container: #dae8f1;

  --mm-error: #f0afa8;
  --mm-on-error: #57160f;
  --mm-error-container: #822217;
  --mm-on-error-container: #f7d7d4;

  --mm-surface: #0f100e;
  --mm-on-surface: #e5e7e4;
  --mm-surface-dim: #0f100e;
  --mm-surface-bright: #3c4139;
  --mm-surface-container-lowest: #0a0b09;
  --mm-surface-container-low: #191b18;
  --mm-surface-container: #1e211c;
  --mm-surface-container-high: #2a2e28;
  --mm-surface-container-highest: #373c34;
  --mm-inverse-surface: #e5e7e4;
  --mm-inverse-on-surface: #32372f;
  --mm-inverse-primary: #3e844c;

  --mm-surface-variant: #495643;
  --mm-on-surface-variant: #cad3c5;
  --mm-outline: #95a68c;
  --mm-outline-variant: #627359;

  --mm-scrim: #000000;
  --mm-shadow: #000000;
  --mm-surface-tint: var(--mm-primary);

  --mm-bg: var(--mm-surface);
  --mm-on-bg: var(--mm-on-surface);
  --mm-accent: #90cb9c;
  --mm-on-accent: #102314;

  --mm-focus-ring: 3px solid #a8c8ff;

  --mm-surface-1: var(--mm-surface-container-low);
  --mm-surface-2: var(--mm-surface-container);
  --mm-surface-3: var(--mm-surface-container-high);
  --mm-surface-4: var(--mm-surface-container-highest);
  --mm-surface-5: var(--mm-surface-container-highest);
}

:root[data-density="compact"] { --mm-density: -1; }
:root[data-density="comfortable"] { --mm-density: 1; }