/* The Marathons — color themes (generated from themes.json)
   Usage: <html data-theme="sky" data-mode="dark">   modes: dark | light
   Load AFTER the-marathons.css. Lime/dark reproduces the current site exactly.
   Every value maps onto the existing --tm-* semantic tokens, so components need no changes. */

/* Lime — Current brand */
:root[data-theme="lime"][data-mode="dark"]{
  --tm-bg: #111317;
  --tm-fg: #f4f3ef;
  --tm-fg-muted: #aeb4bc;
  --tm-fg-dim: #7c828b;
  --tm-fg-faint: #5a616b;
  --tm-panel: #171a20;
  --tm-panel-2: #21262e;
  --tm-border: #262a31;
  --tm-border-soft: #23272f;
  --tm-accent: #d4ff3f;
  --tm-accent-press: #c2ef2c;
  --tm-accent-ink: #111317;
  --tm-accent-soft: rgba(212, 255, 63, 0.14);
  --tm-lime: #d4ff3f;
  --tm-lime-press: #c2ef2c;
  --tm-trail: #79b45f;
  --tm-trail-2: #8ec873;
  --tm-logo-ink: #f4f3ef;
  --tm-logo-sky: #1d2128;
  --tm-logo-sun: #d4ff3f;
  --tm-logo-peak: #4f8a3d;
  --tm-logo-meadow: #8ec873;
  color-scheme: dark;
}
:root[data-theme="lime"][data-mode="light"]{
  --tm-bg: #fffdf9;
  --tm-fg: #1a1c20;
  --tm-fg-muted: #595d66;
  --tm-fg-dim: #6e737c;
  --tm-fg-faint: #7c828b;
  --tm-panel: #ffffff;
  --tm-panel-2: #f6f1e9;
  --tm-border: #e9e0d2;
  --tm-border-soft: #efe7da;
  --tm-accent: #4e7c35;
  --tm-accent-press: #436b2d;
  --tm-accent-ink: #ffffff;
  --tm-accent-soft: rgba(121, 180, 95, 0.16);
  --tm-lime: #d4ff3f;
  --tm-lime-press: #c2ef2c;
  --tm-trail: #79b45f;
  --tm-trail-2: #8ec873;
  --tm-logo-ink: #111317;
  --tm-logo-sky: #d4ff3f;
  --tm-logo-sun: #fbf7f0;
  --tm-logo-peak: #4f8a3d;
  --tm-logo-meadow: #8ec873;
  color-scheme: light;
}

/* Violet — Purple peaks, icy sky */
:root[data-theme="violet"][data-mode="dark"]{
  --tm-bg: #13111a;
  --tm-fg: #f4f3ef;
  --tm-fg-muted: #b1afaf;
  --tm-fg-dim: #848285;
  --tm-fg-faint: #69676b;
  --tm-panel: #1d1b24;
  --tm-panel-2: #26242c;
  --tm-border: #302e36;
  --tm-border-soft: #2a282f;
  --tm-accent: #c4aaff;
  --tm-accent-press: #b29be8;
  --tm-accent-ink: #13111a;
  --tm-accent-soft: rgba(196, 170, 255, 0.14);
  --tm-lime: #c4aaff;
  --tm-lime-press: #b49ceb;
  --tm-trail: #c4aaff;
  --tm-trail-2: #cdb7ff;
  --tm-logo-ink: #f4f3ef;
  --tm-logo-sky: #1f1b2b;
  --tm-logo-sun: #c1e3ff;
  --tm-logo-peak: #8a6bbd;
  --tm-logo-meadow: #c4aaff;
  color-scheme: dark;
}
:root[data-theme="violet"][data-mode="light"]{
  --tm-bg: #f7f4fb;
  --tm-fg: #111317;
  --tm-fg-muted: #646469;
  --tm-fg-dim: #6f6f74;
  --tm-fg-faint: #908f94;
  --tm-panel: #ffffff;
  --tm-panel-2: #efecf3;
  --tm-border: #e0dee4;
  --tm-border-soft: #e7e4eb;
  --tm-accent: #7c60a9;
  --tm-accent-press: #6d5495;
  --tm-accent-ink: #ffffff;
  --tm-accent-soft: rgba(196, 170, 255, 0.18);
  --tm-lime: #c1e3ff;
  --tm-lime-press: #b2d1eb;
  --tm-trail: #c4aaff;
  --tm-trail-2: #cdb7ff;
  --tm-logo-ink: #111317;
  --tm-logo-sky: #c1e3ff;
  --tm-logo-sun: #fbf7f0;
  --tm-logo-peak: #8a6bbd;
  --tm-logo-meadow: #c4aaff;
  color-scheme: light;
}

/* Sky — Lake & sky */
:root[data-theme="sky"][data-mode="dark"]{
  --tm-bg: #0d1420;
  --tm-fg: #eef3fa;
  --tm-fg-muted: #abb0b9;
  --tm-fg-dim: #7e848d;
  --tm-fg-faint: #636973;
  --tm-panel: #171e2a;
  --tm-panel-2: #202733;
  --tm-border: #2a313c;
  --tm-border-soft: #242a36;
  --tm-accent: #9fd3ff;
  --tm-accent-press: #90c0e9;
  --tm-accent-ink: #0d1420;
  --tm-accent-soft: rgba(159, 211, 255, 0.14);
  --tm-lime: #9fd3ff;
  --tm-lime-press: #92c2eb;
  --tm-trail: #5b8fd6;
  --tm-trail-2: #74a0dc;
  --tm-logo-ink: #eef3fa;
  --tm-logo-sky: #17233a;
  --tm-logo-sun: #9fd3ff;
  --tm-logo-peak: #1f4e8c;
  --tm-logo-meadow: #5b8fd6;
  color-scheme: dark;
}
:root[data-theme="sky"][data-mode="light"]{
  --tm-bg: #f3f6fb;
  --tm-fg: #0f1a2b;
  --tm-fg-muted: #616976;
  --tm-fg-dim: #666e7b;
  --tm-fg-faint: #8c939d;
  --tm-panel: #ffffff;
  --tm-panel-2: #ebeef4;
  --tm-border: #dce0e6;
  --tm-border-soft: #e3e7ec;
  --tm-accent: #1f4e8c;
  --tm-accent-press: #1b457b;
  --tm-accent-ink: #ffffff;
  --tm-accent-soft: rgba(91, 143, 214, 0.18);
  --tm-lime: #9fd3ff;
  --tm-lime-press: #92c2eb;
  --tm-trail: #5b8fd6;
  --tm-trail-2: #74a0dc;
  --tm-logo-ink: #0f1a2b;
  --tm-logo-sky: #9fd3ff;
  --tm-logo-sun: #fbf7f0;
  --tm-logo-peak: #1f4e8c;
  --tm-logo-meadow: #5b8fd6;
  color-scheme: light;
}

/* Rust — Desert sunset */
:root[data-theme="rust"][data-mode="dark"]{
  --tm-bg: #1a1210;
  --tm-fg: #f8eee8;
  --tm-fg-muted: #b5aca7;
  --tm-fg-dim: #89807c;
  --tm-fg-faint: #6e6662;
  --tm-panel: #241c1a;
  --tm-panel-2: #2d2522;
  --tm-border: #372f2c;
  --tm-border-soft: #302826;
  --tm-accent: #ffb37a;
  --tm-accent-press: #e8a36f;
  --tm-accent-ink: #1a1210;
  --tm-accent-soft: rgba(255, 179, 122, 0.14);
  --tm-lime: #ffb37a;
  --tm-lime-press: #eba570;
  --tm-trail: #e07a4f;
  --tm-trail-2: #e58e69;
  --tm-logo-ink: #f8eee8;
  --tm-logo-sky: #2a1c18;
  --tm-logo-sun: #ffb37a;
  --tm-logo-peak: #a6402a;
  --tm-logo-meadow: #e07a4f;
  color-scheme: dark;
}
:root[data-theme="rust"][data-mode="light"]{
  --tm-bg: #fbf3ec;
  --tm-fg: #1f1210;
  --tm-fg-muted: #6e635f;
  --tm-fg-dim: #786e69;
  --tm-fg-faint: #988e89;
  --tm-panel: #ffffff;
  --tm-panel-2: #f3ebe4;
  --tm-border: #e5ddd6;
  --tm-border-soft: #ece3dd;
  --tm-accent: #a6402a;
  --tm-accent-press: #923825;
  --tm-accent-ink: #ffffff;
  --tm-accent-soft: rgba(224, 122, 79, 0.18);
  --tm-lime: #ffb37a;
  --tm-lime-press: #eba570;
  --tm-trail: #e07a4f;
  --tm-trail-2: #e58e69;
  --tm-logo-ink: #1f1210;
  --tm-logo-sky: #ffb37a;
  --tm-logo-sun: #fbf3ec;
  --tm-logo-peak: #a6402a;
  --tm-logo-meadow: #e07a4f;
  color-scheme: light;
}

/* Earth — Brown, tan & cream */
:root[data-theme="earth"][data-mode="dark"]{
  --tm-bg: #1c1610;
  --tm-fg: #f6eedf;
  --tm-fg-muted: #b5ada1;
  --tm-fg-dim: #898278;
  --tm-fg-faint: #6f685f;
  --tm-panel: #262019;
  --tm-panel-2: #2f2822;
  --tm-border: #38322b;
  --tm-border-soft: #322c25;
  --tm-accent: #f0dcb4;
  --tm-accent-press: #dbc8a4;
  --tm-accent-ink: #1c1610;
  --tm-accent-soft: rgba(240, 220, 180, 0.14);
  --tm-lime: #f0dcb4;
  --tm-lime-press: #ddcaa6;
  --tm-trail: #b08a5e;
  --tm-trail-2: #bc9c76;
  --tm-logo-ink: #f6eedf;
  --tm-logo-sky: #2b2219;
  --tm-logo-sun: #f0dcb4;
  --tm-logo-peak: #6b4a2e;
  --tm-logo-meadow: #b08a5e;
  color-scheme: dark;
}
:root[data-theme="earth"][data-mode="light"]{
  --tm-bg: #f7f0e3;
  --tm-fg: #2a1d12;
  --tm-fg-muted: #74695d;
  --tm-fg-dim: #73695d;
  --tm-fg-faint: #9b9185;
  --tm-panel: #ffffff;
  --tm-panel-2: #f0e9dc;
  --tm-border: #e3dbce;
  --tm-border-soft: #e9e1d4;
  --tm-accent: #6b4a2e;
  --tm-accent-press: #5e4128;
  --tm-accent-ink: #ffffff;
  --tm-accent-soft: rgba(176, 138, 94, 0.18);
  --tm-lime: #f0dcb4;
  --tm-lime-press: #ddcaa6;
  --tm-trail: #b08a5e;
  --tm-trail-2: #bc9c76;
  --tm-logo-ink: #2a1d12;
  --tm-logo-sky: #f0dcb4;
  --tm-logo-sun: #fffaf0;
  --tm-logo-peak: #6b4a2e;
  --tm-logo-meadow: #b08a5e;
  color-scheme: light;
}

/* Graphite — Grayscale */
:root[data-theme="graphite"][data-mode="dark"]{
  --tm-bg: #111111;
  --tm-fg: #f2f2f2;
  --tm-fg-muted: #afafaf;
  --tm-fg-dim: #828282;
  --tm-fg-faint: #676767;
  --tm-panel: #1b1b1b;
  --tm-panel-2: #242424;
  --tm-border: #2e2e2e;
  --tm-border-soft: #282828;
  --tm-accent: #e2e2e2;
  --tm-accent-press: #cdcdcd;
  --tm-accent-ink: #111111;
  --tm-accent-soft: rgba(226, 226, 226, 0.14);
  --tm-lime: #e2e2e2;
  --tm-lime-press: #d0d0d0;
  --tm-trail: #9a9a9a;
  --tm-trail-2: #a9a9a9;
  --tm-logo-ink: #f2f2f2;
  --tm-logo-sky: #222222;
  --tm-logo-sun: #e2e2e2;
  --tm-logo-peak: #4a4a4a;
  --tm-logo-meadow: #9a9a9a;
  color-scheme: dark;
}
:root[data-theme="graphite"][data-mode="light"]{
  --tm-bg: #f4f4f4;
  --tm-fg: #111111;
  --tm-fg-muted: #636363;
  --tm-fg-dim: #6d6d6d;
  --tm-fg-faint: #8e8e8e;
  --tm-panel: #ffffff;
  --tm-panel-2: #ececec;
  --tm-border: #dddddd;
  --tm-border-soft: #e4e4e4;
  --tm-accent: #4a4a4a;
  --tm-accent-press: #414141;
  --tm-accent-ink: #ffffff;
  --tm-accent-soft: rgba(154, 154, 154, 0.18);
  --tm-lime: #e2e2e2;
  --tm-lime-press: #d0d0d0;
  --tm-trail: #9a9a9a;
  --tm-trail-2: #a9a9a9;
  --tm-logo-ink: #111111;
  --tm-logo-sky: #e2e2e2;
  --tm-logo-sun: #ffffff;
  --tm-logo-peak: #4a4a4a;
  --tm-logo-meadow: #9a9a9a;
  color-scheme: light;
}

/* Alpenglow — Pink peaks at dusk */
:root[data-theme="alpenglow"][data-mode="dark"]{
  --tm-bg: #170f13;
  --tm-fg: #fbeff2;
  --tm-fg-muted: #b7acaf;
  --tm-fg-dim: #897f83;
  --tm-fg-faint: #6e6468;
  --tm-panel: #21191d;
  --tm-panel-2: #2a2226;
  --tm-border: #352c30;
  --tm-border-soft: #2e2529;
  --tm-accent: #ffc9c2;
  --tm-accent-press: #e8b6b1;
  --tm-accent-ink: #170f13;
  --tm-accent-soft: rgba(255, 201, 194, 0.14);
  --tm-lime: #ffc9c2;
  --tm-lime-press: #ebb9b2;
  --tm-trail: #d97a98;
  --tm-trail-2: #df8ea7;
  --tm-logo-ink: #fbeff2;
  --tm-logo-sky: #2a1820;
  --tm-logo-sun: #ffc9c2;
  --tm-logo-peak: #8c3b5c;
  --tm-logo-meadow: #d97a98;
  color-scheme: dark;
}
:root[data-theme="alpenglow"][data-mode="light"]{
  --tm-bg: #fbf3f3;
  --tm-fg: #22141a;
  --tm-fg-muted: #706468;
  --tm-fg-dim: #756a6d;
  --tm-fg-faint: #998f91;
  --tm-panel: #ffffff;
  --tm-panel-2: #f3ebeb;
  --tm-border: #e5dddd;
  --tm-border-soft: #ece3e4;
  --tm-accent: #8c3b5c;
  --tm-accent-press: #7b3451;
  --tm-accent-ink: #ffffff;
  --tm-accent-soft: rgba(217, 122, 152, 0.18);
  --tm-lime: #ffc9c2;
  --tm-lime-press: #ebb9b2;
  --tm-trail: #d97a98;
  --tm-trail-2: #df8ea7;
  --tm-logo-ink: #22141a;
  --tm-logo-sky: #ffc9c2;
  --tm-logo-sun: #fff8f0;
  --tm-logo-peak: #8c3b5c;
  --tm-logo-meadow: #d97a98;
  color-scheme: light;
}

/* Glacier — Teal & ice */
:root[data-theme="glacier"][data-mode="dark"]{
  --tm-bg: #0c1716;
  --tm-fg: #eaf6f4;
  --tm-fg-muted: #a7b3b1;
  --tm-fg-dim: #7b8785;
  --tm-fg-faint: #606c6a;
  --tm-panel: #162120;
  --tm-panel-2: #1f2a29;
  --tm-border: #293433;
  --tm-border-soft: #222d2c;
  --tm-accent: #bff2e8;
  --tm-accent-press: #addcd3;
  --tm-accent-ink: #0c1716;
  --tm-accent-soft: rgba(191, 242, 232, 0.14);
  --tm-lime: #bff2e8;
  --tm-lime-press: #b0dfd5;
  --tm-trail: #5fb3a8;
  --tm-trail-2: #77beb5;
  --tm-logo-ink: #eaf6f4;
  --tm-logo-sky: #142826;
  --tm-logo-sun: #bff2e8;
  --tm-logo-peak: #1d6b66;
  --tm-logo-meadow: #5fb3a8;
  color-scheme: dark;
}
:root[data-theme="glacier"][data-mode="light"]{
  --tm-bg: #f0f7f6;
  --tm-fg: #0e1d1c;
  --tm-fg-muted: #5f6b6a;
  --tm-fg-dim: #64706f;
  --tm-fg-faint: #8a9594;
  --tm-panel: #ffffff;
  --tm-panel-2: #e8efee;
  --tm-border: #d9e1e0;
  --tm-border-soft: #e0e8e7;
  --tm-accent: #1d6b66;
  --tm-accent-press: #1a5e5a;
  --tm-accent-ink: #ffffff;
  --tm-accent-soft: rgba(95, 179, 168, 0.18);
  --tm-lime: #bff2e8;
  --tm-lime-press: #b0dfd5;
  --tm-trail: #5fb3a8;
  --tm-trail-2: #77beb5;
  --tm-logo-ink: #0e1d1c;
  --tm-logo-sky: #bff2e8;
  --tm-logo-sun: #ffffff;
  --tm-logo-peak: #1d6b66;
  --tm-logo-meadow: #5fb3a8;
  color-scheme: light;
}

/* Golden Hour — Mustard & olive */
:root[data-theme="golden-hour"][data-mode="dark"]{
  --tm-bg: #16140c;
  --tm-fg: #f8f3e3;
  --tm-fg-muted: #b4b0a3;
  --tm-fg-dim: #878478;
  --tm-fg-faint: #6c695e;
  --tm-panel: #201e16;
  --tm-panel-2: #29271e;
  --tm-border: #333128;
  --tm-border-soft: #2d2a22;
  --tm-accent: #ffd84d;
  --tm-accent-press: #e8c447;
  --tm-accent-ink: #16140c;
  --tm-accent-soft: rgba(255, 216, 77, 0.14);
  --tm-lime: #ffd84d;
  --tm-lime-press: #ebc747;
  --tm-trail: #a3ab5a;
  --tm-trail-2: #b1b873;
  --tm-logo-ink: #f8f3e3;
  --tm-logo-sky: #26220f;
  --tm-logo-sun: #ffd84d;
  --tm-logo-peak: #5e6b2a;
  --tm-logo-meadow: #a3ab5a;
  color-scheme: dark;
}
:root[data-theme="golden-hour"][data-mode="light"]{
  --tm-bg: #fbf6e8;
  --tm-fg: #1e1a0e;
  --tm-fg-muted: #6e695c;
  --tm-fg-dim: #736e61;
  --tm-fg-faint: #989386;
  --tm-panel: #ffffff;
  --tm-panel-2: #f3eee0;
  --tm-border: #e5e0d2;
  --tm-border-soft: #ece7d9;
  --tm-accent: #5e6b2a;
  --tm-accent-press: #535e25;
  --tm-accent-ink: #ffffff;
  --tm-accent-soft: rgba(163, 171, 90, 0.18);
  --tm-lime: #ffd84d;
  --tm-lime-press: #ebc747;
  --tm-trail: #a3ab5a;
  --tm-trail-2: #b1b873;
  --tm-logo-ink: #1e1a0e;
  --tm-logo-sky: #ffd84d;
  --tm-logo-sun: #fffaf0;
  --tm-logo-peak: #5e6b2a;
  --tm-logo-meadow: #a3ab5a;
  color-scheme: light;
}

/* Midnight — Navy & starlight */
:root[data-theme="midnight"][data-mode="dark"]{
  --tm-bg: #080b1c;
  --tm-fg: #eef0ff;
  --tm-fg-muted: #a9abbb;
  --tm-fg-dim: #7b7e8e;
  --tm-fg-faint: #5f6272;
  --tm-panel: #121526;
  --tm-panel-2: #1c1e2f;
  --tm-border: #26293a;
  --tm-border-soft: #1f2233;
  --tm-accent: #fff0a8;
  --tm-accent-press: #e6d99a;
  --tm-accent-ink: #080b1c;
  --tm-accent-soft: rgba(255, 240, 168, 0.14);
  --tm-lime: #fff0a8;
  --tm-lime-press: #ebdd9b;
  --tm-trail: #5866b8;
  --tm-trail-2: #717dc3;
  --tm-logo-ink: #eef0ff;
  --tm-logo-sky: #121836;
  --tm-logo-sun: #fff0a8;
  --tm-logo-peak: #1d2a6b;
  --tm-logo-meadow: #5866b8;
  color-scheme: dark;
}
:root[data-theme="midnight"][data-mode="light"]{
  --tm-bg: #eef0f7;
  --tm-fg: #0b1030;
  --tm-fg-muted: #5d6178;
  --tm-fg-dim: #676b81;
  --tm-fg-faint: #888b9d;
  --tm-panel: #ffffff;
  --tm-panel-2: #e6e8f0;
  --tm-border: #d7dae3;
  --tm-border-soft: #dee0e9;
  --tm-accent: #1d2a6b;
  --tm-accent-press: #1a255e;
  --tm-accent-ink: #ffffff;
  --tm-accent-soft: rgba(88, 102, 184, 0.18);
  --tm-lime: #c9d2ff;
  --tm-lime-press: #b9c1eb;
  --tm-trail: #5866b8;
  --tm-trail-2: #717dc3;
  --tm-logo-ink: #0b1030;
  --tm-logo-sky: #c9d2ff;
  --tm-logo-sun: #fff6d6;
  --tm-logo-peak: #1d2a6b;
  --tm-logo-meadow: #5866b8;
  color-scheme: light;
}

/* Trend/chart colors stay constant across themes, except pace which follows the accent. */
:root[data-theme]:not([data-theme="lime"]){ --tm-trend-pace: var(--tm-lime); }

/* Logo mark: shared/_tm_mark.html.erb reads these, so the logo recolors with the theme. */
.tm-logo__mark .tm-mark__sky{ fill: var(--tm-logo-sky, #1d2128); }
.tm-logo__mark .tm-mark__sun{ fill: var(--tm-logo-sun, #d4ff3f); }
.tm-logo__mark .tm-mark__peak{ fill: var(--tm-logo-peak, #4f8a3d); }
.tm-logo__mark .tm-mark__meadow{ fill: var(--tm-logo-meadow, #8ec873); }
.tm-logo__mark .tm-mark__ink{ stroke: var(--tm-logo-ink, #f4f3ef); }

/* Smooth switch (skipped for reduced motion) */
@media (prefers-reduced-motion: no-preference){
  :root.tm-theme-switching, :root.tm-theme-switching *{ transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, fill 200ms ease, stroke 200ms ease !important; }
}