/* ═══ GetFit surface system (semantic tokens) ═══════════════════════════════════════════════════════════════════════════
 * One small layer of semantic tokens on top of the existing theme (css/style.css). It does NOT replace the theme and the GetFit gold stays the locked
 * #d4a017 (--gold): gold is for selected states, primary actions, the active nav item and the one highlighted figure in a chart — never for borders, backgrounds
 * or links in general.
 *
 * Visual reference (system only, nothing copied): Theme Lab 05A "Premium Native iOS / Apple Midnight Dark" for dark — near-black base, charcoal grouped surfaces,
 * strong white type, muted grey secondary, subtle separators, few coloured borders — and 05B for light — soft grouped background, white elevated cards, black
 * type, neutral separators. Dark is the primary theme; light keeps the same structure so layouts are identical in both.
 *
 * Opt-in: a page adopts the system by putting class="gf-surfaces" on <body>. That remaps the legacy tokens (--bg, --bg-card, --bg-input, --text, --border …)
 * for that page only, so every existing component picks the new surfaces up without per-component edits. Adopters so far: Progress.
 *
 * Contrast (WCAG): dark — primary #f5f5f7 on surface-1 #161618 ≈ 17:1, secondary #c2c2c8 ≈ 10:1, muted #8e8e96 ≈ 5.3:1; light — primary #111114 on #fff ≈ 19:1,
 * secondary #4a4a52 ≈ 8.8:1, muted #6e6e76 ≈ 5.0:1.
 */
:root {
    --gf-bg:             #0c0c0e;   /* page */
    --gf-surface-1:      #161618;   /* cards (grouped) */
    --gf-surface-2:      #1f1f22;   /* inset: inputs, chips, tiles inside a card */
    --gf-surface-3:      #2a2a2e;   /* raised / hover */
    --gf-text-primary:   #f5f5f7;
    --gf-text-secondary: #c2c2c8;
    --gf-text-muted:     #8e8e96;
    --gf-divider:        rgba(255, 255, 255, 0.08);
    --gf-border:         rgba(255, 255, 255, 0.10);
    --gf-border-strong:  rgba(255, 255, 255, 0.18);
    --gf-gold:           var(--gold);
    --gf-on-gold:        #1a1200;   /* text on a solid gold control (dark ink in both themes) */
    --gf-success:        var(--green);
    --gf-warning:        var(--gold);
    --gf-danger:         var(--red);
    --gf-chart-muted:    rgba(245, 245, 247, 0.26);   /* the non-highlighted marks of a chart; gold marks the one that matters */
    --gf-radius-card:    16px;
    --gf-card-pad:       1.25rem 1.4rem;
}
[data-theme="light"] {
    --gf-bg:             #f2f2f7;
    --gf-surface-1:      #ffffff;
    --gf-surface-2:      #f2f2f7;
    --gf-surface-3:      #e6e6ec;
    --gf-text-primary:   #111114;
    --gf-text-secondary: #4a4a52;
    --gf-text-muted:     #6e6e76;
    --gf-divider:        rgba(0, 0, 0, 0.08);
    --gf-border:         rgba(0, 0, 0, 0.09);
    --gf-border-strong:  rgba(0, 0, 0, 0.18);
    --gf-chart-muted:    rgba(17, 17, 20, 0.22);
}

/* The remap applies at :root (not only on <body>) so EVERY element -- including anything attached to <html> or read from document.documentElement --
   resolves the same canonical tokens; .gf-surfaces stays on <body> as the page marker and paints the page background. */
:root, .gf-surfaces {
    --bg:           var(--gf-bg);
    --bg-card:      var(--gf-surface-1);
    --bg-input:     var(--gf-surface-2);
    --bg-hover:     var(--gf-surface-3);
    --text:         var(--gf-text-primary);
    --text-muted:   var(--gf-text-secondary);
    --text-hint:    var(--gf-text-muted);
    --border:       var(--gf-border);
    --border-hover: var(--gf-border-strong);
    --gold-border:  var(--gf-border-strong);
}
.gf-surfaces { background: var(--gf-bg); }


/* ── Responsive page width ─────────────────────────────────────────────────────────────────────────────────────────────
 * Data-dense pages should use the screen they are given instead of sitting in a 1100px column on a 1440–1920px display, but never stretch edge to edge (long
 * lines and far-apart eyes are worse than empty margins). Width steps with the screen: compact/tablet = fluid, standard desktop 1100, 13–14" laptop 1240,
 * large desktop 1400, very large 1560. Form-style pages (Profile, Workout form) set their own narrower column instead of using this token. */
:root { --gf-page-max: 1100px; --gf-page-pad: clamp(16px, 3vw, 40px); }
@media (min-width: 1366px) { :root { --gf-page-max: 1240px; } }
@media (min-width: 1680px) { :root { --gf-page-max: 1400px; } }
@media (min-width: 2200px) { :root { --gf-page-max: 1560px; } }