/*--------------------------------------------------------------
# BetTrackr design tokens
#
# Single source of truth for the extension theme. Ported 1:1 from
# bettrackr-mobile apps/mobile/theme/tokens.ts (brandNavy default,
# carbon alternate). Loaded by the popup (layout.html) and injected
# into bookmaker pages ahead of button.css via manifest content_scripts.
#
# Custom properties are NOT reset by the injected UI's `all: unset`
# isolation (the `all` shorthand excludes custom properties), so
# declaring them on :root works in both worlds.
--------------------------------------------------------------*/

:root {
  /* -- brandNavy palette (default) -- */
  --bettrackr-bg: #0a0e27;
  --bettrackr-surface: #141a3a;
  --bettrackr-surface-alt: #1d2547;
  --bettrackr-primary: #4ade47;
  --bettrackr-on-primary: #06210a;
  --bettrackr-secondary: #fde047;
  --bettrackr-text: #f8faff;
  --bettrackr-text-muted: #8b93b8;
  --bettrackr-positive: #4ade47;
  /* Darker green for green text that can land on a light host page (the
     injected in-page messages on white bookmaker sites). The bright
     --bettrackr-positive glares on white; this reads cleanly there. */
  --bettrackr-positive-on-light: #1f9e3f;
  --bettrackr-negative: #ef4444;
  --bettrackr-danger: #ef4444;
  --bettrackr-border: rgba(255, 255, 255, 0.08);
  --bettrackr-input-bg: #1d2547;
  --bettrackr-overlay: rgba(0, 0, 0, 0.55);
  /* Text on secondary-yellow fills. Yellow is light in every theme, so this
     stays dark everywhere (no per-theme override). */
  --bettrackr-on-secondary: #252008;

  /* -- RGB triplets for Bootstrap's rgba(var(--bs-*-rgb), a) plumbing.
     Must track primary/positive/negative/secondary per theme. -- */
  --bettrackr-primary-rgb: 74, 222, 71;
  --bettrackr-positive-rgb: 74, 222, 71;
  --bettrackr-negative-rgb: 239, 68, 68;
  --bettrackr-warning-rgb: 253, 224, 71;

  /* -- injected "Track with BetTrackr" button brand colors. The classic navy
     button look on bookmaker sites, independent of the popup theme. -- */
  --bettrackr-brand-blue: #0f0f3f;
  --bettrackr-brand-blue-hover: #292959;

  /* -- web-only derivations (mobile uses pressed-opacity; hovers need shades) -- */
  --bettrackr-primary-hover: #43cd40;
  --bettrackr-negative-hover: #dc2626;
  --bettrackr-surface-hover: #232b52;
  --bettrackr-focus-ring: rgba(74, 222, 71, 0.25);
  --bettrackr-positive-wash: rgba(74, 222, 71, 0.12);
  --bettrackr-negative-wash: rgba(239, 68, 68, 0.12);
  --bettrackr-warning-wash: rgba(253, 224, 71, 0.12);
  --bettrackr-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);

  /* -- spacing scale -- */
  --bettrackr-sp-xs: 4px;
  --bettrackr-sp-sm: 8px;
  --bettrackr-sp-md: 14px;
  --bettrackr-sp-lg: 20px;
  --bettrackr-sp-xl: 28px;

  /* -- radii -- */
  --bettrackr-r-card: 16px;
  --bettrackr-r-button: 14px;
  --bettrackr-r-input: 12px;
  --bettrackr-r-pill: 999px;

  /* -- typography (system stack, like the mobile app) -- */
  --bettrackr-font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  /* -- bookmaker letter-avatar hues (mobile lib/bookmaker-avatar.ts) -- */
  --bettrackr-avatar-blue: #3b82f6;
  --bettrackr-avatar-violet: #8b5cf6;
  --bettrackr-avatar-pink: #ec4899;
  --bettrackr-avatar-amber: #f59e0b;
  --bettrackr-avatar-teal: #14b8a6;
  --bettrackr-avatar-cyan: #06b6d4;
}

/* Alternate palettes, selected in Settings -> Appearance. Keyed off the
   namespaced data-bettrackr-theme attribute (NOT data-theme) because this
   file is injected into bookmaker pages, where a generic data-theme value
   set by the site itself must not re-theme the injected UI. The popup's
   theme.js stamps the attribute; the injected world never does, so the
   in-page UI always stays brandNavy dark. */

/* carbon: the mobile app's OLED-black variant; accents shared with brandNavy. */
:root[data-bettrackr-theme="carbon"] {
  --bettrackr-bg: #0a0a0a;
  --bettrackr-surface: #0a0a0a;
  --bettrackr-surface-alt: #111111;
  --bettrackr-text: #f5f5f5;
  --bettrackr-text-muted: #8f8f8f;
  --bettrackr-border: rgba(255, 255, 255, 0.1);
  --bettrackr-input-bg: #141414;
  --bettrackr-overlay: rgba(0, 0, 0, 0.75);
  --bettrackr-surface-hover: #1a1a1a;
  --bettrackr-r-card: 0px;
  --bettrackr-r-button: 8px;
  --bettrackr-r-input: 8px;
}

/* light: no mobile counterpart (the app is dark-only); derived from the same
   hues with accents darkened to keep text contrast on white surfaces. */
:root[data-bettrackr-theme="light"] {
  --bettrackr-bg: #f4f6fb;
  --bettrackr-surface: #ffffff;
  --bettrackr-surface-alt: #eef1f8;
  --bettrackr-primary: #16a34a;
  --bettrackr-on-primary: #ffffff;
  --bettrackr-secondary: #ca8a04;
  --bettrackr-text: #10173a;
  --bettrackr-text-muted: #5a6284;
  --bettrackr-positive: #15803d;
  --bettrackr-negative: #dc2626;
  --bettrackr-danger: #dc2626;
  --bettrackr-border: rgba(16, 23, 58, 0.1);
  --bettrackr-input-bg: #eef1f8;
  --bettrackr-overlay: rgba(15, 15, 30, 0.4);
  --bettrackr-primary-hover: #15803d;
  --bettrackr-negative-hover: #b91c1c;
  --bettrackr-surface-hover: #e3e8f4;
  --bettrackr-focus-ring: rgba(22, 163, 74, 0.25);
  --bettrackr-positive-wash: rgba(21, 128, 61, 0.1);
  --bettrackr-negative-wash: rgba(220, 38, 38, 0.1);
  --bettrackr-warning-wash: rgba(202, 138, 4, 0.12);
  --bettrackr-shadow: 0 4px 12px rgba(16, 23, 58, 0.12);
  --bettrackr-primary-rgb: 22, 163, 74;
  --bettrackr-positive-rgb: 21, 128, 61;
  --bettrackr-negative-rgb: 220, 38, 38;
  --bettrackr-warning-rgb: 202, 138, 4;
}

/* --------------------------------------------------------------
# Dashboard widget accents (web-only)
#
# Per-widget icon hues restored from dashboard_v1.8, brightened
# where the originals were too dark for the navy surfaces. Used
# by dashboard_v2.css via color-mix washes.
-------------------------------------------------------------- */
:root {
  --bettrackr-widget-revenue: #2eca6a;
  --bettrackr-widget-turnover: #f0509b;
  --bettrackr-widget-customers: #ff771d;
  --bettrackr-widget-win-rate: #b87bf6;
  --bettrackr-widget-bonus-retention: #5b6cff;
  --bettrackr-widget-mug-bet-rate: #f05252;
  --bettrackr-widget-roi: #34c46a;
  --bettrackr-widget-average-profit: #2eb872;
  --bettrackr-widget-balance: #6577ff;
  --bettrackr-widget-pending: #eab308;
  --bettrackr-widget-ev: #14b8a6;
  --bettrackr-widget-shared: #c65cd9;
  --bettrackr-widget-exposure: #f0b429;
  --bettrackr-widget-bonus-balance: #648cff;
  --bettrackr-widget-commission: #e05555;
  --bettrackr-widget-cashflow: #43a047;
  --bettrackr-widget-average-odds: #7986cb;
  --bettrackr-widget-average-stake: #38a8e8;
  --bettrackr-widget-avg-clv: #26a69a;
  --bettrackr-widget-beat-line: #f9a825;
}

/* --------------------------------------------------------------
# Bonus semantic (web port of the mobile bonus/onBonus pair)
# A bonus or cash refund is a good thing - light blue, distinct
# from positive green and pending yellow.
-------------------------------------------------------------- */
:root {
  --bettrackr-bonus: #c9daf8;
  --bettrackr-on-bonus: #1e40af;
  --bettrackr-bonus-wash: rgba(100, 140, 255, 0.16);
  /* pending: SOLID warm surface, not a transparency. An alpha yellow
     blends with the navy behind it and greys out (yellow+blue cancel),
     so this is a hand-picked dark gold with a genuinely low blue channel.
     Slightly lighter than surface, clearly warm, quiet enough for text. */
  --bettrackr-pending-bg: #3b3820;
  /* bonus ink: text-weight bonus blue (pale on dark, deep on light) */
  --bettrackr-bonus-ink: #648cff;
}

:root[data-bettrackr-theme="light"] {
  --bettrackr-bonus-wash: rgba(30, 64, 175, 0.1);
  --bettrackr-pending-bg: #fdf6d0;
  --bettrackr-bonus-ink: #1e40af;
}