/* ============================================================================
   BetPrince — Sportsbook theme (LIGHT default + DARK toggle)
   Mobile only. Royal blue + gold + white. NGN currency.
   Scope: wrap the app in <div class="sb-root"> ; toggle dark by setting
   data-theme="dark" on that element. Fonts/spacing come from colors_and_type.css.
   ============================================================================ */

.sb-root,
:root {
  /* surfaces */
  --bg:        #ECEEF4;
  --bg-2:      #F6F7FA;
  --card:      #FFFFFF;
  --card-2:    #F4F6FA;
  --line:      #E6E9F0;
  --line-2:    #D8DDE8;

  /* ink */
  --ink:   #101A2E;
  --ink-2: #5A6675;
  --ink-3: #6F7986;  /* darker than before — was #97A1B1, too faint on small text like dates / "X min ago" */

  /* brand */
  --blue:        #2536D8;
  --blue-strong: #1B279E;
  --blue-tint:   #E9ECFB;
  --blue-ink:    #FFFFFF;

  --gold:        #F7C53D;
  --gold-strong: #E2AC1C;
  --gold-ink:    #20180A;

  --green:        #16A34A;
  --green-strong: #11843B;
  --green-ink:    #FFFFFF;

  --live:    #EF4444;
  --live-bg: #FCE7E7;

  /* chrome */
  --header-bg:  #2536D8;
  --ticket-top: #3548E6;
  --header-ink: #FFFFFF;
  --header-sub: rgba(255,255,255,0.82);
  --nav-bg:     #FFFFFF;
  --nav-ink:    #97A1B1;
  --nav-active: #2536D8;

  --shadow-card: 0 2px 10px rgba(20,30,80,0.06);
  --shadow-pop:  0 16px 40px rgba(15,23,42,0.18);
  --scrim:       rgba(15,23,42,0.45);

  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-text);
  color-scheme: only light;
}

.sb-root[data-theme="dark"] {
  color-scheme: only dark;
  --bg:        #0D1018;
  --bg-2:      #141A26;
  --card:      #161C2B;
  --card-2:    #1E2638;
  --line:      #2A3346;
  --line-2:    #36415A;

  --ink:   #F2F4F8;
  --ink-2: #9CA6B4;
  --ink-3: #8A95A4;  /* lighter than before — was #6B7480, too dim on dark bg for small text */

  --blue:        #4664FF;
  --blue-strong: #2E49E0;
  --blue-tint:   #1B2440;
  --blue-ink:    #FFFFFF;

  --gold:        #F7C53D;
  --gold-strong: #E2AC1C;
  --gold-ink:    #20180A;

  --green:        #1FB257;
  --green-strong: #179247;
  --green-ink:    #FFFFFF;

  --live:    #FF5C5C;
  --live-bg: #3A1F22;

  --header-bg:  #2536D8;
  --ticket-top: #3548E6;
  --header-ink: #FFFFFF;
  --header-sub: rgba(255,255,255,0.72);
  --nav-bg:     #121726;
  --nav-ink:    #6B7480;
  --nav-active: #6E86FF;

  --shadow-card: 0 2px 10px rgba(0,0,0,0.4);
  --shadow-pop:  0 16px 40px rgba(0,0,0,0.6);
  --scrim:       rgba(0,0,0,0.6);
}

.sb-root, .sb-root * { box-sizing: border-box; }
.sb-num { font-family: var(--font-num); font-feature-settings: "tnum" 1, "lnum" 1; }