/* ==========================================================================
   House of Winners — design tokens
   Extracted from the Figma header. Loaded first — every other stylesheet here depends on these variables.

   A value earns a token when it appears in more than one place, or when it's
   a decision someone could later want to change globally. One-off values stay
   in the component.
   ========================================================================== */
:root{

  /* --- Colour ---------------------------------------------------------- */
  --hw-surface:        #121212;   /* Page / nav background                 */
  --hw-surface-raised: #1C1C1C;   /* Dropdown panels — inferred, not in Figma */
  --hw-gold:           #FACF5A;   /* Primary accent: icons, key text       */
  --hw-gold-line:      #9F853F;   /* Borders on gold-accented elements     */
  --hw-rule:           #4D4E4C;   /* Dividers, hairlines                   */
  --hw-on-surface:     #FFFFFF;   /* Primary text                          */
  --hw-focus:          #FACF5A;   /* Keyboard focus ring                   */

  --hw-muted:          #B3B3B3;   /* Secondary text — confirmed from the footer frame */
  --hw-btn-login-bg:   #3B4461;   /* Login button fill (logged-out header)  */

  /* --- Mobile side navigation ------------------------------------------
     Note the panel is #12121A, NOT the header's #121212 — a slightly
     blue-shifted near-black. Kept distinct rather than merged. */
  --hw-side-w:        300px;
  --hw-side-bg:      #12121A;
  --hw-side-tile:    #332C20;     /* Icon tile behind each nav glyph        */
  --hw-side-muted:   #A7A7A7;     /* Labels, close icon                     */
  --hw-side-dim:     #8E8EA8;     /* Inactive language sub-label            */
  --hw-side-chev:    #ADADB2;     /* Row chevrons                           */
  --hw-side-tint:    rgba(255,255,255,.06);
  --hw-side-hairline:rgba(255,255,255,.07);
  --hw-live:         #E53E3E;     /* "LIVE" badge                           */
  /* Live Transaction amount column, both the Deposit and Withdrawal tabs.
     Points at the one green in the system rather than a second hand-picked
     value, so refining --hw-success carries here too. */
  --hw-txn-amt:      var(--hw-success);

  --hw-lang-active:     #F0C040;
  --hw-lang-active-bg:  rgba(240,192,64,.10);
  --hw-lang-active-border: rgba(240,192,64,.45);
  --hw-lang-active-dim: rgba(240,192,64,.65);

  /* The brand gold gradient. Appears on the Join Now button and the hero
     headline. #F3C961 is a stop inside it, not a competing flat accent. */
  --hw-gold-gradient:  linear-gradient(180deg, #CD932C 0%, #F3C961 50%, #EFCF35 75%, #C49616 100%);
  --hw-gold-mid:       #F3C961;   /* Announcement text; also a gradient stop */

  /* Home page surfaces */
  --hw-page-bg:        #000000;
  --hw-hero-bg:        #352A23;
  --hw-footer-bg:      #171717;

  /* Not yet supplied by any frame — expect these to change once a form or
     table section arrives. */
  --hw-danger:         #FF6B7A;   /* PROVISIONAL */
  --hw-success:        #8FD18F;   /* PROVISIONAL */

  /* --- Type -------------------------------------------------------------
     rem, not px, so the browser's font-size setting is honoured. */
  --hw-font:           Arial, "Helvetica Neue", Helvetica, sans-serif;
  /* !! This theme sets html{font-size:62.5%} (css/assets/css/style.css:2),
     the 10px-root trick. So 1rem = 10px here, NOT 16px. All rem values below
     are therefore x10, not x16 — 1.6rem is sixteen pixels.
     Do not "simplify" these to 1rem/0.75rem; that renders 10px/7.5px. */
  /* Figma says 12px (= 1.2rem here). 14px is a small bump for readability;
     set these to 1.2rem for pixel-exact design, or 1.6rem for 16px. */
  --hw-fs:             1.4rem;    /* 14px */
  --hw-fs-sm:          1.2rem;    /* 12px — dense labels only */
  --hw-fs-btn:         1.4rem;    /* 14px — Login / Join Now, header + side menu */
  --hw-lh:             1.3;       /* unitless: survives wrapping           */
  --hw-fw:             700;

  /* --- Space ------------------------------------------------------------ */
  --hw-gap-xs:          5px;
  --hw-gap-sm:          8px;
  --hw-gap-btn:        10px;      /* Between the logged-out auth buttons    */
  --hw-gap-md:         15px;
  --hw-gap-lg:         30px;
  --hw-gap-xl:         50px;

  /* --- Structure -------------------------------------------------------- */
  --hw-container:    1250px;      /* Content column (Figma frame is 1440)  */
  --hw-radius:          5px;
  --hw-radius-pill:    20px;      /* Auth buttons                          */
  --hw-band-top:       80px;
  --hw-band-bottom:    40px;
  --hw-z-nav:         1000;
}