/* ============================================================
   FantasyGolfBag — shared design tokens

   Tournament Summary grew its own complete token scale (--ts-*)
   while Course Summary grew a different one (--cs-*) on top of
   raw Bootstrap variables. The two drifted: different accent
   greens, different radius scales, different chart palettes, and
   opposite meanings for the colour red.

   This file is the single source of truth. Both pages alias their
   local prefixes onto these, so a change here moves every tool at
   once and a new tool has a system to build on rather than a blank
   :root block.

   Values are Tournament Summary's, since that page is the
   reference implementation of the look we want.

   Load order: AFTER brand-colors.css (which defines --fgb-green)
   and BEFORE any page-specific stylesheet.
   ============================================================ */

:root {
    /* ---- Surfaces ---------------------------------------- */
    --fgb-bg-primary: #ffffff;
    --fgb-bg-secondary: #f8f9fa;
    --fgb-bg-tertiary: #f1f3f5;
    --fgb-bg-elevated: #ffffff;
    --fgb-bg-inset: #f4f5f7;

    /* ---- Borders ----------------------------------------- */
    --fgb-border: #e2e5e9;
    --fgb-border-subtle: #eef0f2;
    --fgb-border-strong: #d1d5db;

    /* ---- Text -------------------------------------------- */
    --fgb-text-primary: #111827;
    --fgb-text-secondary: #6b7280;
    --fgb-text-tertiary: #9ca3af;
    --fgb-text-inverse: #ffffff;

    /* ---- Accent ------------------------------------------
       Chained to the brand green rather than restated, so this
       file cannot drift from brand-colors.css either. */
    --fgb-accent: var(--fgb-green, #16a34a);
    --fgb-accent-hover: var(--fgb-green-dark, #15803d);
    --fgb-accent-subtle: #f0fdf4;
    --fgb-accent-muted: #dcfce7;

    /* ---- Status / delta colours --------------------------
       "positive" and "negative" mean better/worse than a
       baseline. They are NOT golf scoring - see below. */
    --fgb-positive: #10b981;
    --fgb-positive-bg: #ecfdf5;
    --fgb-negative: #ef4444;
    --fgb-negative-bg: #fef2f2;
    --fgb-warning: #f59e0b;
    --fgb-warning-bg: #fffbeb;

    /* ---- Golf scoring: the leaderboard convention ---------
       Red under par, plain over par, blue level. This is what
       every golf broadcast and scoreboard does, and it applies
       to PLAYER SCORES only: leaderboards, winning scores,
       score-to-par columns.

       It deliberately does NOT apply to course difficulty -
       see the difficulty ramp below. A scorecard and a heatmap
       are different objects and users read them differently. */
    --fgb-score-under: #d1242f;
    --fgb-score-even: #2563eb;

    /* ---- Course difficulty heatmap ------------------------
       Green easy -> red hard, for anything measuring how the
       COURSE plays: hole scoring average vs par, proximity or
       GIR against tour, hole difficulty ranks.

       Red here means "danger", which is the opposite sense to
       --fgb-score-under above and is intentional. The rule is
       the object being coloured, not the page it sits on:
         a number a PLAYER shot   -> scoring convention
         a number the COURSE did  -> difficulty ramp */
    --fgb-diff-easy: #22c55e;
    --fgb-diff-easier: #4ade80;
    --fgb-diff-neutral: #94a3b8;
    --fgb-diff-harder: #f59e0b;
    --fgb-diff-hard: #ef4444;

    /* ---- Course fit: a signed rewards/discounts axis ------
       A third kind of object, and neither existing scale fits.
       It is not a player's score and not course difficulty - it
       is "this course pays this skill more, or less, than an
       average tour course", with a real zero in the middle.

       Blue/orange rather than green/red on purpose:
         - a diverging scale needs two hues that stay separable
           for red-green colour vision deficiency, which is
           ~8% of men; green/red is the worst possible pair
         - green and red are already spoken for on this page by
           the difficulty ramp, and a second green/red axis
           meaning something different is how a page teaches
           people to misread it
       Hues carried over from the CVD-validated pair in the
       course-fit research handoff. */
    --fgb-fit-rewards: #05699a;
    --fgb-fit-discounts: #b0521f;
    --fgb-fit-rewards-soft: rgba(5, 105, 154, 0.12);
    --fgb-fit-discounts-soft: rgba(176, 82, 31, 0.12);

    /* The fit axis half-width, in strokes per round. FIXED for
       every course, deliberately: auto-scaling to the data makes
       a 0.03 effect and a 0.20 effect draw identically, so every
       course looks dramatic and none are comparable. Most courses
       really are close to neutral and must read that way.
       A token so it cannot drift between the CSS and the JS. */
    --fgb-fit-domain: 0.25;

    /* ---- Sequential chart ramp ---------------------------
       Brand green, light to dark, for ordinal quantities:
       distance buckets, distribution bars, anything where the
       categories have an order but no good/bad direction.
       Five steps because every distribution chart in the app
       buckets into five. */
    --fgb-ramp-1: #bbf7d0;
    --fgb-ramp-2: #86efac;
    --fgb-ramp-3: #4ade80;
    --fgb-ramp-4: #22c55e;
    --fgb-ramp-5: #16a34a;

    /* ---- Chart chrome ------------------------------------ */
    --fgb-chart-grid: rgba(0, 0, 0, 0.05);
    --fgb-chart-track: rgba(0, 0, 0, 0.03);
    --fgb-chart-baseline: #94a3b8;

    /* ---- Spacing ----------------------------------------- */
    --fgb-space-xs: 0.25rem;
    --fgb-space-sm: 0.5rem;
    --fgb-space-md: 1rem;
    --fgb-space-lg: 1.5rem;
    --fgb-space-xl: 2rem;
    --fgb-space-2xl: 3rem;

    /* ---- Radius ------------------------------------------ */
    --fgb-radius-sm: 4px;
    --fgb-radius-md: 6px;
    --fgb-radius-lg: 8px;
    --fgb-radius-xl: 12px;

    /* ---- Motion ------------------------------------------ */
    --fgb-transition: 150ms ease;
    --fgb-transition-slow: 250ms ease;

    /* ---- Type --------------------------------------------
       Inter comes from typography.css and is the site face; no
       tool should import its own. Mono is for tabular figures. */
    --fgb-font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

    /* ---- Elevation ---------------------------------------
       Deliberately flat. Panels are separated by a 1px border,
       not a drop shadow. Shadow is reserved for things that
       genuinely float above the page - tooltips, popovers,
       modals - so that "raised" still means something. */
    --fgb-shadow-none: none;
    --fgb-shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.15);
    --fgb-shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.18);
}

[data-bs-theme="dark"] {
    --fgb-bg-primary: #0d1117;
    --fgb-bg-secondary: #161b22;
    --fgb-bg-tertiary: #1c2128;
    --fgb-bg-elevated: #1c2128;
    --fgb-bg-inset: #0d1117;

    --fgb-border: #30363d;
    --fgb-border-subtle: #21262d;
    --fgb-border-strong: #484f58;

    --fgb-text-primary: #e6edf3;
    --fgb-text-secondary: #8b949e;
    --fgb-text-tertiary: #6e7681;
    --fgb-text-inverse: #0d1117;

    /* the lighter brand green reads better on #0d1117 */
    --fgb-accent: var(--fgb-green-light, #22c55e);
    --fgb-accent-hover: #4ade80;
    --fgb-accent-subtle: rgba(34, 197, 94, 0.10);
    --fgb-accent-muted: rgba(34, 197, 94, 0.16);

    --fgb-positive: #3fb950;
    --fgb-positive-bg: rgba(63, 185, 80, 0.1);
    --fgb-negative: #f85149;
    --fgb-negative-bg: rgba(248, 81, 73, 0.1);
    --fgb-warning: #d29922;
    --fgb-warning-bg: rgba(210, 153, 34, 0.1);

    /* brighter so they stay legible against #0d1117 */
    --fgb-score-under: #ff7b72;
    --fgb-score-even: #58a6ff;

    --fgb-diff-easy: #3fb950;
    --fgb-diff-easier: #56d364;
    --fgb-diff-neutral: #6e7681;
    --fgb-diff-harder: #d29922;
    --fgb-diff-hard: #f85149;

    /* the ramp is re-anchored rather than reused: #bbf7d0 on a
       near-black background is a near-white bar, which reads as
       the largest value whichever end it sits at. */
    --fgb-ramp-1: #14532d;
    --fgb-ramp-2: #166534;
    --fgb-ramp-3: #15803d;
    --fgb-ramp-4: #16a34a;
    --fgb-ramp-5: #22c55e;

    /* Lifted for contrast against #0d1117; the hue relationship
       and the CVD separation are preserved. */
    --fgb-fit-rewards: #2f9ac8;
    --fgb-fit-discounts: #d2762f;
    --fgb-fit-rewards-soft: rgba(47, 154, 200, 0.16);
    --fgb-fit-discounts-soft: rgba(210, 118, 47, 0.16);

    --fgb-chart-grid: rgba(255, 255, 255, 0.06);
    --fgb-chart-track: rgba(255, 255, 255, 0.05);
    --fgb-chart-baseline: #64748b;

    --fgb-shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.5);
    --fgb-shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.6);
}