/* Spendt brand tokens — V1.0 */
:root {
  /* Deep Navy — Primary text, headers, primary backgrounds. */
  --ss-deep-navy: #0A2540;
  --ss-deep-navy-rgb: 10 37 64;
  /* Mint Green — Primary buttons, positive balances, active states. */
  --ss-mint-green: #20D68A;
  --ss-mint-green-rgb: 32 214 138;
  /* Coral Alert — Warnings, over-budget indicators, destructive actions. */
  --ss-coral-alert: #FF6B6B;
  --ss-coral-alert-rgb: 255 107 107;
  /* Cloud White — App background, elevated card boundaries. */
  --ss-cloud-white: #F8FAFC;
  --ss-cloud-white-rgb: 248 250 252;
  /* Slate — Body copy, captions, secondary UI text. */
  --ss-slate: #64748B;
  --ss-slate-rgb: 100 116 139;
  /* Hairline — Dividers, card borders, table rules. */
  --ss-hairline: #E2E8F0;
  --ss-hairline-rgb: 226 232 240;

  /* semantic aliases */
  --ss-text: var(--ss-deep-navy);
  --ss-text-muted: var(--ss-slate);
  --ss-surface: #FFFFFF;
  --ss-background: var(--ss-cloud-white);
  --ss-border: var(--ss-hairline);
  --ss-action: var(--ss-mint-green);
  --ss-positive: var(--ss-mint-green);
  --ss-negative: var(--ss-coral-alert);

  --ss-font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
  --ss-radius-tile: 24%;   /* logo tile: 24 of 100 units */
  --ss-radius-card: 12px;
  --ss-radius-button: 10px;

  /* Header / balance figure */
  --ss-h1-size: 34px;
  --ss-h1-line: 40px;
  --ss-h1-weight: 700;
  --ss-h1-tracking: -0.02em;
  /* Subtitle / section */
  --ss-h2-size: 22px;
  --ss-h2-line: 28px;
  --ss-h2-weight: 700;
  --ss-h2-tracking: -0.01em;
  /* Card title */
  --ss-h3-size: 17px;
  --ss-h3-line: 24px;
  --ss-h3-weight: 600;
  --ss-h3-tracking: 0;
  /* Body copy */
  --ss-body-size: 16px;
  --ss-body-line: 24px;
  --ss-body-weight: 400;
  --ss-body-tracking: 0;
  /* Secondary copy */
  --ss-body-sm-size: 14px;
  --ss-body-sm-line: 20px;
  --ss-body-sm-weight: 400;
  --ss-body-sm-tracking: 0;
  /* Labels, dates, meta (uppercase) */
  --ss-micro-size: 12px;
  --ss-micro-line: 16px;
  --ss-micro-weight: 600;
  --ss-micro-tracking: 0.08em;
}

/* ready-made text classes */
.ss-h1 { font: var(--ss-h1-weight) var(--ss-h1-size)/var(--ss-h1-line) var(--ss-font-sans);
          letter-spacing: var(--ss-h1-tracking); color: var(--ss-text); }
.ss-h2 { font: var(--ss-h2-weight) var(--ss-h2-size)/var(--ss-h2-line) var(--ss-font-sans);
          letter-spacing: var(--ss-h2-tracking); color: var(--ss-text); }
.ss-body { font: var(--ss-body-weight) var(--ss-body-size)/var(--ss-body-line) var(--ss-font-sans);
           color: var(--ss-text-muted); }
.ss-micro { font: var(--ss-micro-weight) var(--ss-micro-size)/var(--ss-micro-line) var(--ss-font-sans);
            letter-spacing: var(--ss-micro-tracking); text-transform: uppercase;
            color: var(--ss-text-muted); }
.ss-amount-positive { color: var(--ss-positive); font-variant-numeric: tabular-nums; }
.ss-amount-negative { color: var(--ss-negative); font-variant-numeric: tabular-nums; }