/* TrailGoat — "First Light" theme: the light mode.
 * One of the site's selectable palettes (Settings → Theme; "Forest" is the
 * plain :root tokens). tg-store.js owns the switch: it adds `.theme-firstlight`
 * to <html> and lazy-loads this file only when the theme is active — other
 * visitors never fetch it. Scoped under the html class so the overrides win
 * on specificity without !important. The token block overrides the tokens.css
 * vocabulary by name (--c-* feature hues); the legacy --orange/--moss/… aliases
 * resolve through them, so nothing else needs to change.
 *
 * Rebuilt from scratch (2026-09-02). The first cut was "morning paper": a warm
 * khaki ground, beige-on-beige panels, olive accent, and the dark theme's inset
 * wells and heavy drop shadows carried over. It read as muddy, not light. This
 * is a standard light mode instead — the kind every OS and editor ships:
 *
 *   ground   a cool, near-white page with pure white panels
 *   ink      near-black text, one mid grey for secondary copy
 *   edges    hairline borders do the work; shadows are whisper-thin and only
 *            on layers that actually float (menus, tips, popovers)
 *   accent   one forest green, AA both ways (5.4:1 as text on white, and for
 *            white text on a solid fill) — the one hue on duty (TG-282)
 *   data     the nine section hues at a "600" weight so every one holds ≥3.5:1
 *            on white; they stay in data-viz and iconography, never chrome
 *
 * Because it is the only light palette it re-derives the depth system (the
 * line, glass, fill, edge, raise, well and shadow tokens all assume dark
 * ground) and re-lights the spots the page sheets paint with literal white
 * alpha or hard near-black. Map tiles are already light (USGS topo), so the
 * maps blend in rather than sitting in a dark frame. */

html.theme-firstlight {
    /* ---- Ground: well → page → panel → raised ---- */
    --bg-0: #f5f7f6;          /* the page — cool near-white */
    --bg-1: #ffffff;          /* panels (weather-explorer.js reads this hex to detect a light theme) */
    --bg-well: #eceff0;       /* inset tracks & wells sit a step below the page, not below black */
    --bg-2: #ffffff;          /* raised — on paper, raised is simply white */

    /* ---- Ink ---- */
    --ink: #15201b;           /* near-black with a breath of pine — 16.7:1 on white */
    --muted: #5b6864;         /* secondary copy — 5.8:1 on white */
    --ink-bright: #000000;    /* headline emphasis — on paper, "brighter" ink is blacker */
    --faint: color-mix(in srgb, var(--muted) 55%, var(--bg-0));

    /* ---- Accent: forest green, the one hue on duty ---- */
    --accent: #1f7a3a;
    --accent-ink: #ffffff;
    --selection: color-mix(in srgb, var(--accent) 22%, transparent);

    /* ---- The neutral ladder, re-stepped for a white ground ----
       The dark ladder puts a defined edge at 40% ink; on white that is a
       charcoal outline around every control. Light UIs draw with lighter lines
       and slightly stronger fills, so the fills step up a touch and the edges
       come down. Same vocabulary, same roles. */
    --fill-idle: color-mix(in srgb, var(--ink) 4%, transparent);
    --fill-hover: color-mix(in srgb, var(--ink) 8%, transparent);
    --fill-selected: color-mix(in srgb, var(--ink) 14%, transparent);
    --edge: color-mix(in srgb, var(--ink) 22%, transparent);
    --edge-soft: color-mix(in srgb, var(--ink) 14%, transparent);
    --ring: color-mix(in srgb, var(--accent) 30%, transparent);

    /* ---- Lines & glass: ink washes instead of white ones ---- */
    --line: rgba(21, 32, 27, 0.12);
    --glass: rgba(21, 32, 27, 0.035);
    --glass-2: rgba(21, 32, 27, 0.06);

    /* ---- Feature palette (data-viz + section iconography only) ---- */
    --c-fuel: #d9580d;        /* Fueling */
    --c-pace: #4f8f0a;        /* Pacing */
    --c-crew: #1c8f4e;        /* Crew */
    --c-course: #0f8b7d;      /* Course */
    --c-gear: #6d4fd6;        /* Gear */
    --c-weather: #a63ab9;     /* Weather */
    --c-climb: #d63d5c;       /* Climbs */
    --c-aid: #1180bd;         /* Aid stations + descents */
    --gold: #a5780a;          /* AI coach — Capra gradient, darkened to hold on white */

    /* ---- Status: the three semantic colours, at a weight that holds on white ---- */
    --ok: #1c8f4e;            /* ready, saved, synced — 4.6:1 */
    --warn: #b4700a;          /* draft, stale, needs a look — 4.5:1 */
    --bad: #c62f4a;           /* failed, invalid, destructive — 5.6:1 */

    /* ---- Depth, flattened ----
       Resting surfaces get a hairline and a step of the ground. The raise
       tokens keep a 1px contact shadow so a card still separates from a card
       behind it; the well is a faint inner line, not a carved trench; the one
       pop shadow is soft and grey, never black. */
    --raise-1: 0 1px 2px rgba(21, 32, 27, 0.06);
    --raise-2: 0 1px 2px rgba(21, 32, 27, 0.06), 0 6px 16px -8px rgba(21, 32, 27, 0.18);
    --raise-primary: 0 1px 2px rgba(21, 32, 27, 0.10);
    --well: inset 0 1px 2px rgba(21, 32, 27, 0.06);
    --ledge-orange: none;
    --shadow-pop: 0 1px 2px rgba(21, 32, 27, 0.06), 0 10px 28px -6px rgba(21, 32, 27, 0.22);
    --here-fill: #ffffff;
}

/* ===== The page ground =====
   No glows, no aurora, no film grain: a light page is a flat, quiet surface.
   The ridge silhouettes stay as the faintest grey horizon so the brand's
   mountains are still there if you look for them. */
html.theme-firstlight .backdrop { background: var(--bg-0); }
html.theme-firstlight .backdrop::after { display: none; }
html.theme-firstlight .aurora { display: none; }
html.theme-firstlight .ridge { opacity: 1; }
html.theme-firstlight .ridge path,
html.theme-firstlight .ridge .ridge-back { fill: rgba(21, 32, 27, 0.025); }
html.theme-firstlight .ridge .ridge-mid { fill: rgba(21, 32, 27, 0.035); }
html.theme-firstlight .ridge .ridge-front { fill: rgba(21, 32, 27, 0.05); }
html.theme-firstlight ::selection { background: var(--selection); }

/* ===== Home (home.css paints its chrome with literal white alpha) ===== */
html.theme-firstlight .btn-ghost {
    background: var(--bg-1); border-color: var(--edge); box-shadow: var(--raise-1);
}
html.theme-firstlight .btn-ghost:hover { background: var(--fill-idle); border-color: var(--ink); }
html.theme-firstlight .btn-ghost:active { box-shadow: var(--well); }
html.theme-firstlight .btn-primary:hover { filter: brightness(1.1); }
/* The goat: a soft contact shadow, no orange glow (daylight doesn't glow). */
html.theme-firstlight .goat {
    filter: drop-shadow(0 18px 28px rgba(21, 32, 27, 0.22));
}
html.theme-firstlight .bib { box-shadow: 0 4px 12px rgba(21, 32, 27, 0.18); }
/* The bib's second line is 70% ink on gold — 3.1:1, which was fine over the
   dark theme's brighter --gold and is not over the darkened one this theme
   uses. Full ink on the same field is 4.7:1 (TG-299). */
html.theme-firstlight .bib small { color: #1a1205; }
html.theme-firstlight .tool,
html.theme-firstlight .panel,
html.theme-firstlight .fuel-card { border-top-color: var(--line); box-shadow: var(--raise-1); }
html.theme-firstlight .tool:hover { background: var(--bg-1); border-color: var(--edge); box-shadow: var(--raise-2); }
/* The card's identity hue as TEXT (TG-299). The nine feature hues are set at a
   "600" weight so each holds ≥3.5:1 on white as a mark — right for a dot, a
   spark line or an icon, and a hair under AA for a word. The four cards' "Plan
   a run →" lines are the one place a hue is asked to be copy, so they take a
   darker cut of whatever --card-acc home.html set inline: 86% of the hue over
   black lands every one of them between 5.1:1 and 5.6:1. The mark itself is
   untouched, and so are the four dark themes. */
html.theme-firstlight .tool .go {
    color: color-mix(in srgb, var(--card-acc, var(--accent)) 86%, #000);
}
html.theme-firstlight .tool-emoji {
    border-color: var(--line); box-shadow: none;
    background: color-mix(in srgb, var(--card-acc, var(--accent)) 12%, transparent);
}
/* The numbered steps' white figure-on-solid-accent rule lived here. TG-301
   retired .step with the strip it belonged to; the step number is now a tinted
   tile in the card's own hue (.tool-num), which needs no light-mode override
   for the same reason .tool-emoji doesn't. */
html.theme-firstlight .cta-band { background-image: none; }
/* Hero route SVG: gradient stops → the daylight data hues; the dot's stroke
   was the dark ground, which on paper becomes a white halo. */
html.theme-firstlight #hr-grad stop:nth-of-type(1) { stop-color: #d9580d; }
html.theme-firstlight #hr-grad stop:nth-of-type(2) { stop-color: #a5780a; }
html.theme-firstlight #hr-grad stop:nth-of-type(3) { stop-color: #4f8f0a; }
html.theme-firstlight .hr-dot { stroke: #ffffff; }

/* ===== Chrome (nav.css) ===== */
/* Segmented controls: a light grey track and a white key with a hairline. */
html.theme-firstlight .unit-toggle,
html.theme-firstlight .theme-grid {
    background: var(--bg-well); border-color: var(--line); box-shadow: none;
}
html.theme-firstlight .unit-toggle button.active,
html.theme-firstlight .theme-grid button.active {
    background: #ffffff; color: var(--ink);
    border-color: var(--line);
    box-shadow: 0 1px 2px rgba(21, 32, 27, 0.10);
}
html.theme-firstlight .theme-grid button:hover { background: var(--fill-hover); }
html.theme-firstlight .theme-swatch { border-color: var(--line); }
/* Settings fields: native light controls on a white field. */
html.theme-firstlight .set-field select,
html.theme-firstlight .set-field input[type="number"] {
    background: #ffffff; box-shadow: none; color-scheme: light;
}
html.theme-firstlight .tg-info { border-color: var(--edge); background: var(--fill-idle); }
/* Tips, popovers and the tour card hardcode dark panels but colour their text
   with --ink, which is dark here — give them a white surface. */
html.theme-firstlight #tg-tip,
html.theme-firstlight #tg-pop,
html.theme-firstlight #tg-tour { background: #ffffff; border-color: var(--line); box-shadow: var(--shadow-pop); }
html.theme-firstlight #tg-tip::before { border-top-color: var(--line); }
html.theme-firstlight #tg-tip.below::before { border-top-color: transparent; border-bottom-color: var(--line); }
html.theme-firstlight .tg-tour-dots span { background: rgba(21, 32, 27, 0.45); }
html.theme-firstlight .tg-tour-dots span.on { background: var(--accent); }

/* ===== Tool pages (fuel.css / raceday.css) ===== */
/* Inputs: white fields, native light pickers, a green focus ring. */
html.theme-firstlight input[type="number"],
html.theme-firstlight input[type="text"],
html.theme-firstlight input[type="search"],
html.theme-firstlight input[type="datetime-local"],
html.theme-firstlight input[type="date"],
html.theme-firstlight select,
html.theme-firstlight textarea {
    background: #ffffff; color-scheme: light;
}
html.theme-firstlight .rd-wx-datefield input { background: #ffffff; }
html.theme-firstlight ::placeholder { color: var(--faint); }
/* The tonal / estimate buttons wear white-alpha gradients — on white, a plain
   white button with a hairline is the same idea. */
html.theme-firstlight .export-btn.tonal,
html.theme-firstlight .estimate-btn {
    background: #ffffff; border-color: var(--edge); box-shadow: var(--raise-1);
}
html.theme-firstlight .export-btn.tonal:hover,
html.theme-firstlight .estimate-btn:hover { background: var(--fill-idle); border-color: var(--ink); }
html.theme-firstlight .export-btn.tonal:active,
html.theme-firstlight .estimate-btn:active { box-shadow: var(--well); }
html.theme-firstlight .slider::-webkit-slider-thumb { background: #ffffff; box-shadow: 0 1px 4px rgba(21, 32, 27, 0.25); }
html.theme-firstlight .slider::-moz-range-thumb { background: #ffffff; }
/* Section cards: a lighter header wash (26% of a saturated hue is a pastel
   band on white; 10% is a tint) and a white glyph on the hue-filled tile. */
html.theme-firstlight .rd-section > summary {
    background: linear-gradient(100deg, color-mix(in srgb, var(--acc, var(--muted)) 10%, transparent), transparent 92%);
}
html.theme-firstlight .rd-sec-ico { box-shadow: none; }
html.theme-firstlight .rd-sec-ico .ico { color: #ffffff; }
html.theme-firstlight .creator-panel-head {
    background: linear-gradient(100deg, color-mix(in srgb, var(--acc, var(--muted)) 10%, var(--bg-1)), var(--bg-1) 92%);
}
/* Course search dropdown: a floating white menu. */
html.theme-firstlight .course-suggest { background: #ffffff; }
/* Right-pane scroll fades blend into the page, not into the dark ground. */
html.theme-firstlight .rd-fade-top { background: linear-gradient(to bottom, rgba(245, 247, 246, 0.95), transparent); }
html.theme-firstlight .rd-fade-btm { background: linear-gradient(to top, rgba(245, 247, 246, 0.95), transparent); }
html.theme-firstlight .plan-table tr.pace-sub td { background: rgba(21, 32, 27, 0.025); }
/* Pack coverage meter: a flat grey channel and a flat hue fill, no gloss. */
html.theme-firstlight .fp-cov-track {
    background: var(--bg-well); border-color: var(--line); box-shadow: none;
}
html.theme-firstlight .fp-cov-fill {
    background: var(--acc, var(--teal)); box-shadow: none;
}
html.theme-firstlight .fp-pct.over { text-shadow: none; }
/* The aid-station pucks keep a dark figure on their hue; give them a white
   ring so they lift off the topo tiles. */
html.theme-firstlight .aid-marker { box-shadow: 0 1px 4px rgba(21, 32, 27, 0.35); }
html.theme-firstlight .lib-del { background: #ffffff; }

/* ----- Map chrome -----
   fuel.css paints every floating map control near-black. The tiles are light
   topo in every theme, so on paper those controls read as holes punched in the
   page. White blocks with a hairline, like the rest of the chrome. */
html.theme-firstlight .leaflet-bar a,
html.theme-firstlight .map-3d-btn,
html.theme-firstlight .map-locate-btn,
html.theme-firstlight .map-expand-btn,
html.theme-firstlight .map-play-btn,
html.theme-firstlight .map-speed-btn,
html.theme-firstlight .tg-3d-exit,
html.theme-firstlight .tg-3d-fly-btn,
html.theme-firstlight .tg-3d-fly-speed {
    background: rgba(255, 255, 255, 0.96); color: var(--ink);
    border-color: var(--line); box-shadow: 0 1px 3px rgba(21, 32, 27, 0.18);
}
html.theme-firstlight .leaflet-bar a:hover { background: var(--fill-hover); }
html.theme-firstlight .tg-3d-badge {
    background: rgba(255, 255, 255, 0.94); border-color: color-mix(in srgb, var(--gold) 45%, transparent);
}
html.theme-firstlight .leaflet-control-layers {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: var(--line) !important;
    box-shadow: var(--shadow-pop) !important;
}
/* The collapsed layers toggle is a white Leaflet sprite — invert it to ink. */
html.theme-firstlight .leaflet-control-layers-toggle { filter: invert(1) hue-rotate(180deg); }
html.theme-firstlight .leaflet-control-scale-line {
    background: rgba(255, 255, 255, 0.85); color: var(--muted); border-color: var(--edge);
}
html.theme-firstlight .tg-inspect .leaflet-popup-content-wrapper,
html.theme-firstlight .tg-inspect .leaflet-popup-tip { background: rgba(255, 255, 255, 0.97); }
html.theme-firstlight .tg-mile,
html.theme-firstlight .tg-tog-mile .tg-dot { background: #ffffff; }

/* ===== Course map (discover.css) ===== */
html.theme-firstlight #discover-map { background: #e6eae8; }
html.theme-firstlight .dv-selects select option { background: #ffffff; }
html.theme-firstlight .dv-layers button.on { color: #ffffff; }

/* ===== Library (library.css) — scrollbars, download group, skeleton ===== */
html.theme-firstlight .lib-list::-webkit-scrollbar-thumb,
html.theme-firstlight .lib-detail::-webkit-scrollbar-thumb { background: rgba(21, 32, 27, 0.18); }
html.theme-firstlight .lib-dl-group { border-color: var(--edge); background: #ffffff; }
html.theme-firstlight .lib-dl-group button + button { border-left-color: var(--line); }
html.theme-firstlight .lib-dl-group button:hover { background: var(--fill-hover); }
html.theme-firstlight .lib-skel-line {
    background: linear-gradient(90deg, rgba(21, 32, 27, 0.04) 25%, rgba(21, 32, 27, 0.10) 50%, rgba(21, 32, 27, 0.04) 75%);
}

/* ===== Dashboard (dashboard.css) — progress track and reference rows ===== */
html.theme-firstlight .dash-week-bar { background: rgba(21, 32, 27, 0.08); }
html.theme-firstlight .dash-ref-tbl td { border-bottom-color: var(--line); }