/* ==========================================================================
   BRAND TOKENS — the only file to edit for color/font changes.
   app.css and the share-image renderer
   (js/share-card.js) both read these, so a change here flows everywhere.

   Values = the Tool Tax Brand Pack (set up in SHIFT, Sep 30 2026):
   dark #0A0A0F, cyan #22E3FF, magenta #D946EF, violet #8B5CF6, light #F2F2F5,
   Poppins headings, Inter body. The gradient stops are sampled from
   tool-tax-wordmark.png so buttons and numbers match the logo.
   ========================================================================== */
:root {
  /* Surfaces */
  --bg:    #0A0A0F;   /* BRAND: page background */
  --bg2:   #12121A;   /* BRAND: recessed surface */
  --card:  #15151F;   /* BRAND: card surface */
  --line:  #23232F;   /* BRAND: hairline borders */

  /* Text */
  --fg:    #F2F2F5;   /* BRAND: primary text */
  --muted: #9A9AAB;   /* BRAND: secondary text */
  --dim:   #6B6B7B;   /* BRAND: tertiary text / footnotes */

  /* Accents */
  --cyan:    #22E3FF; /* BRAND: eyebrow labels, focus, checked state */
  --violet:  #8B5CF6;
  --magenta: #D946EF; /* used for the over-allowance state */
  --danger:  #FF4D6D; /* dummy-data ribbon only */

  /* Gradient — three stops kept separate so the canvas share image can use them */
  --grad-1: #22E3FF;  /* BRAND: wordmark start (cyan) */
  --grad-2: #EC93EC;  /* BRAND: wordmark middle (light pink) */
  --grad-3: #D946EF;  /* BRAND: wordmark end (magenta) */
  --grad: linear-gradient(120deg, var(--grad-1) 0%, var(--grad-2) 55%, var(--grad-3) 100%);
  --btn-fg: #0A0A0F;  /* BRAND: dark text on the gradient (white on cyan fails contrast) */
  --btn-glow: 0 10px 30px rgba(34, 227, 255, .22);

  /* Type — loaded from Google Fonts in index.html */
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Shape & spacing */
  --radius: 16px;
  --radius-sm: 12px;
  --gutter: 16px;
  --topbar: 52px;
}