/*
 * LineupIQ - Brand Colors  ("Cobalt")
 *
 * The LineupIQ counterpart to brand-colors.css. Loaded via
 * Brand.BrandStylesheet on getlineupiq.com hosts INSTEAD of
 * brand-colors.css, never alongside it.
 *
 * Same contract as brand-colors.css: it overrides
 *   1. CSS custom properties (variables)
 *   2. Button colors
 * and nothing else, so it cannot collide with theme.min.css.
 *
 * Load order (set in _Layout.cshtml, do not change):
 *   theme.min.css -> THIS FILE -> fgb-tokens.css -> typography.css
 *
 * ---------------------------------------------------------------
 * WHY A BLUE IS ASSIGNED TO A VARIABLE CALLED "--fgb-green"
 *
 * fgb-tokens.css is shared by both brands and is not forked. It
 * chains its accent to the brand hue:
 *
 *     --fgb-accent: var(--fgb-green, #16a34a);
 *
 * So --fgb-green is really "the brand hue" wearing a name it was
 * given when there was only one brand. Re-pointing it here is what
 * re-themes every tool on the LineupIQ host in one move. Renaming
 * it would mean editing fgb-tokens.css, which FGB depends on and
 * which is under a byte-identical regression bar.
 * ---------------------------------------------------------------
 */

@import url("lineupiq-type.css");

:root {
    /* ---- Primary brand hue: Cobalt ----------------------------
       #1D4ED8 carries white text at 6.70:1 (AA). The brighter
       #3B82F6 does NOT - it measures 3.68:1 and must never be a
       fill behind white text. It lives here as -light, whose only
       job is the dark-mode accent, where it sits on near-black. */
    --fgb-green: #1D4ED8;
    --fgb-green-rgb: 29, 78, 216;
    --fgb-green-light: #3B82F6;
    --fgb-green-dark: #1E40AF;

    /* Override Bootstrap Primary */
    --bs-primary: #1D4ED8;
    --bs-primary-rgb: 29, 78, 216;

    /* ---- Success stays GREEN ----------------------------------
       On FGB the brand hue and the success hue were the same
       colour, so brand-colors.css could point both at the green
       and nothing was lost. They diverge here. If --bs-success
       followed the brand, every success alert, "Saved" badge and
       positive delta in the shared app would turn blue and stop
       meaning success.

       #15803D rather than FGB's #16a34a: the lighter green carries
       white text at only 3.30:1, so FGB's .btn-success has always
       failed AA. Not repeating that here - #15803D measures
       5.02:1. */
    --bs-success: #15803D;
    --bs-success-rgb: 21, 128, 61;
    --bs-green: #15803D;

    /* ---- Marketing chrome tokens ------------------------------
       Consumed by _NavbarLineupIQ.cshtml, _FooterMarketingLineupIQ.cshtml
       and the inline <style> block in Views/Home/IndexLineupIQ.cshtml,
       all of which currently read these with hardcoded fallbacks.
       Defining them here is what retires those fallbacks.

       Deliberately NOT named --liq-accent-blue / --liq-bg-* : that
       namespace belongs to assets/css/LineupIQ/variables.css, which
       themes the optimizer app. These four names do not appear there,
       so the two files do not collide. See the wiring note about
       eventually re-anchoring that file to Cobalt too. */
    --liq-navbar-bg: #080D1C;
    --liq-accent: #60A5FA;
    --liq-accent-soft: rgba(96, 165, 250, 0.12);
    --liq-hero-bg: linear-gradient(160deg, #080D1C 0%, #12213F 58%, #080D1C 100%);

    /* Surface + ink values behind the tokens above, exposed for any
       LineupIQ-only page that needs them directly. */
    --liq-surface-dark: #080D1C;
    --liq-surface-elevated: #101833;
    --liq-border-dark: #1C2747;
    --liq-on-dark: #E8EEFB;
    --liq-on-dark-muted: #8E9DC0;

    /* ---- Sport accents ----------------------------------------
       One hue per sport, for CHIPS ONLY - a dot plus a tinted pill.
       Never a fill, never a button: the cobalt primary stays the
       only thing on screen that means "click me".

       Hues are spaced for red-green colour vision deficiency and
       pinned to a similar lightness so no sport reads louder than
       the others. All four clear 7:1 on --liq-surface-dark. */
    --liq-sport-nfl: #A78BFA;
    --liq-sport-nba: #FB923C;
    --liq-sport-mlb: #22D3EE;
    --liq-sport-pga: #4ADE80;
}

/* ============================================
   ACCENT TOKENS THAT DO NOT FOLLOW --fgb-green

   Re-pointing --fgb-green re-themes most of fgb-tokens.css, because
   --fgb-accent and --fgb-accent-hover chain to it. Five siblings do
   NOT chain - they are literal greens:

     :root                     --fgb-accent-subtle  #f0fdf4
                               --fgb-accent-muted   #dcfce7
     [data-bs-theme="dark"]    --fgb-accent-hover   #4ade80
                               --fgb-accent-subtle  rgba(34,197,94,.10)
                               --fgb-accent-muted   rgba(34,197,94,.16)

   Measured live on the LineupIQ token chain before this block
   existed, so this is an observed leak, not a precaution. The
   dark-mode --fgb-accent-hover is the loudest of them: every accent
   hover in the LineupIQ dark theme flashed FGB green.

   fgb-tokens.css loads AFTER this file and cannot be edited (FGB is
   under a byte-identical regression bar), so a plain :root block
   here would lose the cascade. :root:root is the same element with
   a higher specificity - (0,2,0) beats (0,1,0), and
   :root:root[data-bs-theme="dark"] at (0,3,0) beats (0,1,0) - so
   these win despite loading first. Nothing in fgb-tokens.css is
   modified.

   --fgb-positive and --fgb-ramp-* are deliberately NOT overridden.
   --fgb-positive is green because it means "better than baseline",
   which is a semantic, not a brand. The ramp is the ordinal chart
   palette and re-anchoring it to cobalt is a live design decision
   that has not been taken - see the wiring note.
   ============================================ */

:root:root {
    --fgb-accent-subtle: #EEF3FE;   /* cobalt-tinted, was green-50  */
    --fgb-accent-muted: #D8E4FD;    /* cobalt-tinted, was green-100 */
}

:root:root[data-bs-theme="dark"] {
    /* --fgb-accent resolves to --fgb-green-light (#3B82F6) here, so
       hover lifts to #60A5FA - the same accent the marketing chrome
       uses, at 7.62:1 on the LineupIQ dark surface. */
    --fgb-accent-hover: #60A5FA;
    --fgb-accent-subtle: rgba(59, 130, 246, 0.10);
    --fgb-accent-muted: rgba(59, 130, 246, 0.16);
}

/* ============================================
   BUTTONS ONLY
   ============================================ */

.btn-primary {
    --bs-btn-bg: #1D4ED8;
    --bs-btn-border-color: #1D4ED8;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #1E40AF;
    --bs-btn-hover-border-color: #1E40AF;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #1E40AF;
    --bs-btn-active-border-color: #1E40AF;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 29, 78, 216;
}

/* Green, not blue - see the --bs-success note above. */
.btn-success {
    --bs-btn-bg: #15803D;
    --bs-btn-border-color: #15803D;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #166534;
    --bs-btn-hover-border-color: #166534;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #166534;
    --bs-btn-active-border-color: #166534;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 21, 128, 61;
}

.btn-outline-primary {
    --bs-btn-color: #1D4ED8;
    --bs-btn-border-color: #1D4ED8;
    --bs-btn-hover-bg: #1D4ED8;
    --bs-btn-hover-border-color: #1D4ED8;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #1D4ED8;
    --bs-btn-active-border-color: #1D4ED8;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 29, 78, 216;
}

.btn-outline-success {
    --bs-btn-color: #15803D;
    --bs-btn-border-color: #15803D;
    --bs-btn-hover-bg: #15803D;
    --bs-btn-hover-border-color: #15803D;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #15803D;
    --bs-btn-active-border-color: #15803D;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 21, 128, 61;
}

/* ============================================
   FORM FOCUS STATES
   ============================================ */

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #1D4ED8;
    box-shadow: 0 0 0 0.25rem rgba(29, 78, 216, 0.25);
}

.form-check-input:checked {
    background-color: #1D4ED8;
    border-color: #1D4ED8;
}

/* ============================================
   DARK MODE BUTTONS

   brand-colors.css lightens both primary and success on hover in
   dark mode. That works for a mid-tone green against a dark page
   but it does not survive a contrast check: white on #22c55e is
   2.28:1.

   Primary lightens here because it can - white on #2563EB is
   5.17:1. Success and danger DARKEN on hover instead, because
   every lighter green and rose fails AA behind white text. The
   hover direction differs by hue on purpose; the constant being
   preserved is legibility, not the animation.
   ============================================ */

[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg: #1D4ED8;
    --bs-btn-border-color: #1D4ED8;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #2563EB;
    --bs-btn-hover-border-color: #2563EB;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #2563EB;
    --bs-btn-active-border-color: #2563EB;
    --bs-btn-active-color: #fff;
}

[data-bs-theme="dark"] .btn-success {
    --bs-btn-bg: #15803D;
    --bs-btn-border-color: #15803D;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #166534;
    --bs-btn-hover-border-color: #166534;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #166534;
    --bs-btn-active-border-color: #166534;
    --bs-btn-active-color: #fff;
}

/* ============================================
   SECONDARY - FOREGROUND CONTRAST FIX

   Carried over verbatim from brand-colors.css. These two blocks
   fix bugs in theme.min.css, not in the brand: it redefines
   --bs-secondary from Bootstrap's dark grey to the light slate
   #e2e8f0, which works where secondary is a SURFACE and is
   invisible where Bootstrap uses the same token as a FOREGROUND.

   Brand-independent, so they are identical in both stylesheets.
   If you fix one, fix the other.
   ============================================ */

.badge.bg-secondary {
    /* slate-950 on slate-200 -> 16.4:1 */
    color: #020617;
}

/* ============================================
   SECONDARY AS A FOREGROUND - LIGHT MODE ONLY

   .btn-outline-secondary and .text-secondary both land the light
   slate on the page background at 1.23:1.

   DARK MODE IS DELIBERATELY UNTOUCHED. #e2e8f0 on the dark body
   measures 16.4:1 - already correct - and forcing the light-mode
   slate-600 onto a dark background would measure 2.66:1 and simply
   invert the bug. No single value passes on both, so this is scoped.
   ============================================ */

:root:not([data-bs-theme="dark"]) .btn-outline-secondary {
    --bs-btn-color: #475569;                  /* slate-600, 7.58:1 on white */
    --bs-btn-border-color: #64748b;           /* slate-500, 4.76:1          */
    --bs-btn-disabled-color: #94a3b8;         /* slate-400, muted but visible */
    --bs-btn-disabled-border-color: #cbd5e1;
}

/* theme.min.css sets this with !important, so this has to match it. */
:root:not([data-bs-theme="dark"]) .text-secondary {
    color: #475569 !important;
}