@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,800;0,900;1,700;1,900&family=Barlow:wght@400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

:root {
  /* ── PALETTE ── */
  --red:        #F8444A;
  --red-dark:   #8A0F1F;
  --black:      #0C0C0C;
  --gold:       #F2D054;
  --gold-hover: #f5da70;
  --blue:       #17469D;
  --white:      #FFFFFF;
  --off-white:  #F7F5F2;
  --gray:       #ECEAE7;
  --green:      #3aaa6e;

  /* ── BRAND ── */
  --brand-dark:   #F71538;          /* nav, dark surfaces */
  --brand-bg:     var(--red);       /* page background */
  --brand-light:  var(--white);     /* text on dark */
  --brand-accent: var(--gold);      /* CTAs, primary actions */

  /* ── STATUS (secondary — used by ladder / predict / analyst) ── */
  --status-win:  var(--green);
  --status-draw: var(--gold);
  --status-loss: var(--red-dark);

  /* ── TYPOGRAPHY ── */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Barlow', system-ui, sans-serif;

  /* ── LAYOUT ── */
  --nav-height: 58px;
}