/* ============================================================================
   wallet.softbet.io — design tokens
   Extracted from the DC design sources (design-src/*.dc.html). These values
   are the canonical palette; components in ui.css consume them.
   ========================================================================== */
:root {
  /* surfaces */
  --bg:        #0A0B0D;
  --bg-2:      #0F1114;
  --bg-3:      #15171A;
  --bg-4:      #131619;
  --bg-side:   #0C0D10;
  --bg-chip:   #1C2026;

  /* lines */
  --line:      #1A1C20;
  --line-2:    #24272D;
  --line-3:    #2E323A;
  --line-4:    #34373F;
  --line-div:  #20232A;

  /* ink */
  --ink:       #F1F2F3;
  --ink-2:     #C4C7CC;
  --ink-3:     #9BA0A7;
  --ink-4:     #6A6F77;
  --ink-5:     #4D525A;

  /* accent — acid lime */
  --acid:       #C9F31D;
  --acid-hi:    #E3FF62;
  --acid-lo:    #A8D40A;
  --acid-ink:   #0c1000;
  --acid-grad:  linear-gradient(150deg, #E3FF62 0%, #C9F31D 52%, #A8D40A 100%);
  --acid-grad-sm: linear-gradient(150deg, #E3FF62, #A8D40A);
  --acid-dim:   rgba(201,243,29,0.10);
  --acid-line:  rgba(201,243,29,0.35);
  --acid-line-2: rgba(201,243,29,0.55);
  --acid-glow:  0 0 28px rgba(201,243,29,0.35);
  --acid-glow-hi: 0 0 44px rgba(201,243,29,0.55);

  /* status */
  --amber:      #F5B342;
  --amber-lo:   #d8922a;
  --amber-grad: linear-gradient(150deg, #F5B342, #d8922a);
  --amber-dim:  rgba(245,179,66,0.12);
  --amber-line: rgba(245,179,66,0.4);
  --green:      #34D399;
  --green-dim:  rgba(52,211,153,0.12);
  --green-line: rgba(52,211,153,0.35);
  --red:        #FB6B6B;
  --red-dim:    rgba(251,107,107,0.10);
  --red-line:   rgba(251,107,107,0.4);

  /* type */
  --font-display: 'Anton', sans-serif;
  --font-ui:      'Chakra Petch', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* geometry */
  --r-sm:  7px;
  --r-md:  10px;
  --r-btn: 11px;
  --r-lg:  13px;
  --r-xl:  16px;
  --r-2xl: 22px;
  --shadow-card:  0 40px 90px rgba(0,0,0,0.55);
  --shadow-float: 0 16px 30px rgba(0,0,0,0.4);
  --shadow-toast: 0 16px 36px rgba(0,0,0,0.5);

  /* env accent (test-mode reskins via body[data-env]) */
  --env-accent:      var(--acid);
  --env-accent-grad: var(--acid-grad);
  --env-accent-ink:  var(--acid-ink);
}

body[data-env="test"] {
  --env-accent:      var(--amber);
  --env-accent-grad: var(--amber-grad);
  --env-accent-ink:  #100a00;
}