/* Kaching v0.3 (Wallet-grade native) — design tokens
   Source: prototypes/from-claude-design-v0.3/kaching-mini-app-v0-3-wallet-grade-native/project/styles.css (1462 lines)
   Sync date: 2026-05-22 (session 567 v0.3 alignment audit)
   These tokens are loaded AFTER tokens.css + path-a-patterns.css so they win where
   they overlap. Scope: `html[data-tg-webview="1"]` so public web stays on current
   Path A marketing visual; Mini App pages get the wallet-grade native feel. */

:root {
  /* --- Verdict colors (theme-independent — same in light & dark) --- */
  --verdict-green:        #10b981;
  --verdict-green-strong: #059669;
  --verdict-yellow:       #f59e0b;
  --verdict-yellow-strong:#d97706;
  --verdict-red:          #ef4444;
  --verdict-red-strong:   #dc2626;
  --verdict-green-tint:   rgba(16, 185, 129, 0.10);
  --verdict-yellow-tint:  rgba(245, 158, 11, 0.10);
  --verdict-red-tint:     rgba(239, 68, 68, 0.10);

  /* --- Operator avatar gradient (gold → emerald) --- */
  --op-grad: linear-gradient(135deg, #d4a73a 0%, #10b981 100%);

  /* --- Tier colors --- */
  --tier-free: #10b981;
  --tier-vip:  #10b981;
  --tier-svip: #d4a73a;

  /* --- Type scale (v0.3 wallet-grade) --- */
  --t-eyebrow:   13px;   /* uppercase 0.05em letter-spacing section headers */
  --t-body:      14px;   /* default body text in cards */
  --t-secondary: 12.5px; /* hints, sub-meta */
  --t-micro:     11px;   /* op-caps, verdict-pill */
  --t-h1:        20px;   /* in-app h1 */
  --t-stat-sm:   20px;   /* small stats (card EV, stat-grid val) */
  --t-stat-lg:   28px;   /* hero stats (cashback amount) */
  --t-stat-xl:   40px;   /* verdict-header big EV */

  /* --- Spacing rhythm (4/8/12/16/20/24) --- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;

  /* --- Radius --- */
  --r-card:    10px;
  --r-card-lg: 12px;
  --r-pill:   999px;
  --r-chip:    8px;

  /* --- Font stacks --- */
  --ff-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang TC",
           "PingFang SC", "Noto Sans CJK TC", "Noto Sans CJK SC", system-ui, sans-serif;
  --ff-stat: "Space Grotesk", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ff-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
}

/* ============================================================
   Theme-derived helpers (light theme defaults from Telegram WebApp)
   These read the runtime TG theme variables and define helpers
   that respond to dark theme automatically when Telegram sends
   dark theme params. Compatible with public web (uses fallbacks).
   ============================================================ */
:root {
  --row-pressed: rgba(0, 0, 0, 0.04);
  --bar-bg:      rgba(255, 255, 255, 0.86);
  --bar-border:  rgba(0, 0, 0, 0.08);
  --avatar-text: #ffffff;
}

/* When the Telegram theme is dark (heuristic: TG dark theme sets
   --tg-theme-bg-color to a dark color). The boot script in
   Layout.astro sets html[data-tg-theme="dark"] when wa.colorScheme === 'dark'. */
html[data-tg-theme="dark"] {
  --row-pressed: rgba(255, 255, 255, 0.04);
  --bar-bg:      rgba(33, 37, 41, 0.86);
  --bar-border:  rgba(255, 255, 255, 0.08);
}