/* ==========================================================================
   Vegas Ninjas / Design Tokens
   Drop this in as the first stylesheet. Every color in the app references a
   variable here. Never hard-code a hex anywhere else.

   Contrast ratios below were verified, not trusted. All ten pairs from the
   brand artifact check out to two decimals.
   ========================================================================== */

:root {

  /* --- Core ink & paper ------------------------------------------------- */
  --vn-charcoal:        #171A1D;  /* primary dark surface */
  --vn-text-charcoal:   #1F2326;  /* body text on light */
  --vn-bone:            #F7F4EE;  /* warm off-white, text on dark */
  --vn-paper:           #FFFAF0;  /* page background */

  /* --- Brand ------------------------------------------------------------ */
  --vn-desert-gold:     #F6C85F;  /* the mark, fills, accents on dark ONLY */
  --vn-stardust-purple: #2A1435;  /* recommended primary brand surface */
  --vn-stardust-gold:   #FFCC32;  /* the mark on purple */

  /* --- Functional ------------------------------------------------------- */
  --vn-fine-print-red:  #C83E2C;  /* fee reveals, warnings, gotchas */
  --vn-off-strip-ink:   #102126;  /* product chrome surface */
  --vn-comp-teal:       #21D0B2;  /* filters, active states, verified savings */

  /* --- Semantic aliases (use THESE in components) ----------------------- */
  --vn-bg:              var(--vn-paper);
  --vn-bg-inverse:      var(--vn-charcoal);
  --vn-bg-brand:        var(--vn-stardust-purple);
  --vn-text:            var(--vn-text-charcoal);
  --vn-text-inverse:    var(--vn-bone);
  --vn-warn:            var(--vn-fine-print-red);
  --vn-positive:        var(--vn-comp-teal);
}

/* ==========================================================================
   VERIFIED CONTRAST PAIRS  (WCAG AA needs 4.5 body / 3.0 large)
   --------------------------------------------------------------------------
   Bone       on Charcoal          15.92  AAA
   Bone       on Off-Strip Ink     15.09  AAA
   Bone       on Stardust Purple   15.30  AAA
   Text Char. on Paper             15.21  AAA
   Gold       on Charcoal          11.10  AAA
   Gold       on Text Charcoal     10.06  AAA
   Stardust Gold on Purple         11.15  AAA
   Comp Teal  on Off-Strip Ink      8.46  AAA
   Paper      on Fine Print Red     4.83  AA  (body ok)
   Red        on Text Charcoal      3.15  LARGE TEXT ONLY
   ========================================================================== */

/* ==========================================================================
   THE TRAP  (not in the brand artifact, verified here)
   --------------------------------------------------------------------------
   Gold and teal on light backgrounds fail every threshold. Someone will
   eventually try to highlight a dollar figure in gold on the paper
   background. It will be invisible. These are the numbers:

     Desert Gold   on Paper   1.51   FAILS
     Desert Gold   on Bone    1.43   FAILS
     Stardust Gold on Paper   1.45   FAILS
     Comp Teal     on Paper   1.88   FAILS
     Fine Print Red on Bone   4.58   AA, this one is fine

   RULE: gold and teal are for the mark, fills, and dark surfaces. They are
   never type on a light background. To emphasize a number on paper, use
   weight, size, or Fine Print Red.
   ========================================================================== */

/* Guard rail: emphasis on light backgrounds */
.vn-figure-emphasis {
  color: var(--vn-text-charcoal);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.vn-figure-warn {
  color: var(--vn-warn);           /* 4.83 on paper, AA */
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Every dollar column in the app needs this or the decimals wander */
.vn-money,
table td,
table th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}