/* =========================================================
   MyQuotaBag Design System Tokens — Sprint 18 (2026-05-11)

   Source of truth for colors, spacing and semantic roles.
   Loaded BEFORE custom.css and ratio-calculator.css so all
   downstream rules can use these CSS custom properties.

   Gold decision: #C9A84C is the official primary gold
   (Sprint 16 drift adopted, replaces the legacy #D4AF37).
   ========================================================= */

:root {
  /* Backgrounds */
  --color-bg:          #0A0A0A;
  --color-bg-card:     #161616;
  --color-bg-elevated: #1F1F1F;

  /* Gold system (Sprint 18 unified) */
  --color-gold:         #C9A84C;
  --color-gold-light:   #F1D36A;
  --color-gold-dark:    #A88326;
  --color-gold-muted:   #9A7B3C;
  --color-gold-border:  rgba(201, 168, 76, 0.22);
  --color-gold-rgb:     201, 168, 76; /* for rgba() in inline expressions */

  /* Amber accents (ratio gauge gradients only) */
  --color-amber:       #E8B04C;
  --color-amber-hot:   #F2C66E;

  /* Text */
  --color-text-primary:   #FFFFFF;
  --color-text-secondary: #B5ADA3;
  --color-text-muted:     #7A746B;

  /* Borders */
  --color-border:          #2A2A2A;
  --color-border-neutral:  rgba(255, 255, 255, 0.10);

  /* Semantic status colors (NEW — replaces #C36B6B rose + #8A9BBF blue) */
  --color-included: #C9A84C; /* "Usually included" — gold */
  --color-excluded: #AFA9A1; /* "Usually excluded" — warm muted gray */
  --color-depends:  #D6C08A; /* "Depends" — champagne */

  /* Mobile spacing scale */
  --section-padding-mobile:        72px 20px;
  --section-padding-large-mobile:  96px 20px;
  --section-padding-dense-mobile:  56px 20px;
  --card-padding-mobile:           28px;
  --gap-between-cards:             20px;

  /* Tabular numbers helper (apply via CSS or font-variant-numeric: tabular-nums) */
  --num-font-stack: 'Manrope', system-ui, sans-serif;
}

/* Utility class for any data-numeric element that should not use Cormorant */
.num-data {
  font-family: var(--num-font-stack);
  font-variant-numeric: tabular-nums;
}