/**
 * Kaching Mini App tokens — Path A canonical (emerald + nebula + cosmic).
 *
 * Synced from: prototypes/tokens/tokens.css
 * Last sync: 2026-05-19 (Path A pivot)
 *
 * Source of truth: docs/design/30-design-system.md + 34-brand-identity.md
 * Reference impl: prototypes/from-claude-design/styles.css
 *
 * Mini App context: Telegram theme vars (--tg-theme-*) take precedence in WebApp
 * runtime; fallbacks here cover browser preview / non-Telegram surfaces.
 */

:root {
  /* ─────────────────────────────────────────────────
     Telegram theme vars (Mini App auto-injected)
     Fallback values for non-Telegram preview
     ───────────────────────────────────────────────── */
  --tg-theme-bg-color: #ffffff;
  --tg-theme-text-color: #000000;
  --tg-theme-hint-color: #999999;
  --tg-theme-link-color: #2481cc;
  --tg-theme-button-color: #10b981;
  --tg-theme-button-text-color: #ffffff;
  --tg-theme-secondary-bg-color: #f7f7f7;
  --tg-theme-header-bg-color: #ffffff;
  --tg-theme-section-bg-color: #ffffff;
  --tg-theme-section-separator-color: #e7e7e7;
  --tg-theme-subtitle-text-color: #707579;
  --tg-theme-destructive-text-color: #ef4444;
  --tg-viewport-height: 100vh;
  --tg-viewport-stable-height: 100vh;

  /* ─────────────────────────────────────────────────
     Kaching brand palette — Path A (emerald + nebula)
     Canonical reference: prototypes/from-claude-design/styles.css
     Path A pivot date: 2026-05-19
     ───────────────────────────────────────────────── */

  /* Primary — Kaching Emerald (Claude Design canonical) */
  --kch-primary-50:  #ecfdf5;
  --kch-primary-100: #d1fae5;
  --kch-primary-300: #6ee7b7;
  --kch-primary-400: #34d399;   /* emerald-400 — hover / lighter accent */
  --kch-primary-500: #10b981;   /* brand main — Kaching Emerald */
  --kch-primary-600: #059669;   /* darker / pressed */
  --kch-primary-700: #047857;
  --kch-primary-900: #064e3b;

  /* Emerald aliases (match Claude Design var names for portability) */
  --emerald-400: var(--kch-primary-400);
  --emerald-500: var(--kch-primary-500);
  --emerald-600: var(--kch-primary-600);
  --emerald-glow: rgba(110, 231, 183, 0.40);

  /* Accent — Kaching Gold (Claude Design canonical) */
  --kch-accent-50:  #fef9c3;
  --kch-accent-100: #fde68a;
  --kch-accent-300: #f0c95f;   /* lighter, gradient highlight */
  --kch-accent-500: #d4a73a;   /* brand accent — Kaching Gold (canonical hex) */
  --kch-accent-700: #9a7421;
  --kch-accent-900: #5a430f;

  --gold-300: var(--kch-accent-300);
  --gold-500: var(--kch-accent-500);
  --gold-glow: rgba(212, 167, 58, 0.35);

  /* Surface — deep navy + elevated layers */
  --kch-surface-deep:     #0a0f1f;   /* hero, dark mode (canonical) */
  --kch-surface-elevated: #131a2e;
  --kch-surface-elev:     #131a2e;   /* legacy alias */
  --kch-surface-section:  #1a2340;
  --kch-surface-overlay:  rgba(10, 15, 31, 0.78);
  --kch-surface-line:     rgba(168, 176, 194, 0.08);
  --kch-highlight:        #f0e090;   /* cream-gold sparkle, SVIP badge */

  --bg-deep: var(--kch-surface-deep);
  --bg-elevated: var(--kch-surface-elevated);
  --bg-section: var(--kch-surface-section);
  --border-faint: var(--kch-surface-line);
  --border-emerald: rgba(16, 185, 129, 0.25);
  --border-gold: rgba(212, 167, 58, 0.45);

  /* Text — explicit, since Mini App may also use tg-theme-text-color */
  --kch-text-primary:   var(--tg-theme-text-color);
  --kch-text-secondary: var(--tg-theme-subtitle-text-color);
  --kch-text-hint:      var(--tg-theme-hint-color);

  --text-primary: var(--kch-text-primary);
  --text-secondary: var(--kch-text-secondary);
  --text-hint: var(--kch-text-hint);

  /* Nebula accents (Path A — Claude Design cosmic palette) */
  --kch-nebula-purple: #6d4aff;
  --kch-nebula-teal:   #06b6d4;
  --nebula-purple: var(--kch-nebula-purple);
  --nebula-teal:   var(--kch-nebula-teal);

  /* Verdict colors (semantic) — aligned with Claude Design canonical */
  --kch-verdict-green:  #10b981;   /* = primary.500, brand-unified */
  --kch-verdict-amber:  #f59e0b;   /* renamed from -yellow per Claude Design canonical */
  --kch-verdict-yellow: #f59e0b;   /* backward alias — same hex */
  --kch-verdict-red:    #ef4444;   /* updated from #e04545 */

  --verdict-green: var(--kch-verdict-green);
  --verdict-amber: var(--kch-verdict-amber);
  --verdict-red:   var(--kch-verdict-red);

  /* Status colors */
  --kch-success: #10b981;
  --kch-warning: #f59e0b;
  --kch-error:   #ef4444;
  --kch-info:    #06b6d4;   /* nebula teal */

  /* Glow shadows (Path A signature — emerald + gold + nebula) */
  --kch-emerald-glow: 0 0 30px var(--emerald-glow);
  --kch-gold-glow:    0 0 30px var(--gold-glow);
  --kch-glow-emerald: 0 0 30px var(--emerald-glow);
  --kch-glow-gold:    0 0 30px var(--gold-glow);
  --kch-glow-nebula:  0 0 30px rgba(109, 74, 255, 0.30);

  /* Spacing (4-base linear) */
  --kch-space-1: 4px;
  --kch-space-2: 8px;
  --kch-space-3: 12px;
  --kch-space-4: 16px;
  --kch-space-5: 20px;
  --kch-space-6: 24px;
  --kch-space-8: 32px;

  --kch-radius-sm: 4px;
  --kch-radius-md: 8px;
  --kch-radius-lg: 12px;
  --kch-radius-xl: 16px;
  --kch-radius-2xl: 20px;
  --kch-radius-pill: 9999px;
  --kch-radius-full: 9999px;

  /* Typography — Path A adds Space Grotesk display font */
  --kch-font-family:
    'Inter',
    -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue',
    'PingFang TC', 'PingFang SC', 'Noto Sans CJK TC', sans-serif;

  /* Display font for hero headings (Path A canonical) */
  --kch-font-display:
    'Space Grotesk', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
    'PingFang TC', 'PingFang SC', sans-serif;

  --font-display: var(--kch-font-display);
  --font-body:    var(--kch-font-family);

  /* Path A signature motif durations (Claude Design canonical) */
  --kch-ekg-pulse-duration:    3.5s;
  --kch-radar-sweep-duration:  4s;
  --kch-twinkle-duration:      3s;
  --kch-pulse-soft-duration:   2s;
  --kch-shimmer-duration:      1.4s;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--kch-font-family);
  background: var(--tg-theme-bg-color);
  color: var(--tg-theme-text-color);
  min-height: var(--tg-viewport-height);
  padding-bottom: env(safe-area-inset-bottom);
}

a {
  color: var(--tg-theme-link-color);
  text-decoration: none;
}

button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kch-space-2);
  min-height: 44px;
  padding: 0 var(--kch-space-4);
  border-radius: var(--kch-radius-md);
  border: 0;
  background: var(--kch-primary-500);
  color: #fff;
  font: 600 15px/1 var(--kch-font-family);
  cursor: pointer;
  text-decoration: none;
}

button.secondary,
.btn.secondary {
  background: var(--tg-theme-secondary-bg-color);
  color: var(--tg-theme-text-color);
}

.card {
  background: var(--tg-theme-section-bg-color);
  border-radius: var(--kch-radius-lg);
  padding: var(--kch-space-4);
  margin-bottom: var(--kch-space-3);
  box-shadow: 0 1px 2px rgba(10, 15, 31, 0.08);
}

.verdict-green {
  color: var(--kch-verdict-green);
}
.verdict-yellow {
  color: var(--kch-verdict-yellow);
}
.verdict-red {
  color: var(--kch-verdict-red);
}

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: var(--tg-theme-header-bg-color);
  border-top: 1px solid var(--tg-theme-section-separator-color);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 100;
}
.tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  color: var(--tg-theme-hint-color);
  font-size: 11px;
  gap: 2px;
}
.tabbar a.active {
  color: var(--kch-primary-500);
}
.tabbar-icon {
  font-size: 20px;
}

main {
  padding: var(--kch-space-4);
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

.brand-header {
  display: flex;
  align-items: center;
  gap: var(--kch-space-3);
  padding: var(--kch-space-4) 0;
}
.brand-header img {
  height: 32px;
  width: 32px;
  border-radius: 50%;
}
.brand-header h1 {
  font-size: 20px;
  margin: 0;
  color: var(--kch-primary-700);
  font-family: var(--kch-font-display);
  letter-spacing: -0.01em;
}

/* ─── Utility classes (P1 polish: inline-style → class) ──────────────── */

.page-title {
  font-family: var(--kch-font-display);
  font-size: 22px;
  margin: 0 0 var(--kch-space-4);
  letter-spacing: -0.01em;
}
.section-title {
  font-size: 18px;
  font-weight: 600;
  margin: var(--kch-space-2) 0 var(--kch-space-4);
}
.card h3 { margin: 0 0 var(--kch-space-2); font-size: 16px; }

.muted   { color: var(--kch-text-hint); }
.text-sm { font-size: 13px; }
.text-base { font-size: 15px; }
.text-lg { font-size: 17px; }
.text-xl { font-size: 20px; }

.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--kch-space-3);
}
.stack-2 { display: grid; gap: var(--kch-space-2); }
.stack-3 { display: grid; gap: var(--kch-space-3); }
.stack-4 { display: grid; gap: var(--kch-space-4); }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-1 { flex: 1; min-width: 0; }
.gap-2 { gap: var(--kch-space-2); }
.gap-3 { gap: var(--kch-space-3); }
.items-center { align-items: center; }

.empty-card {
  text-align: center;
  color: var(--kch-text-hint);
  padding: var(--kch-space-6) var(--kch-space-4);
}

/* Premium accent surfaces (P2: gold accent visual hierarchy) */
.card-premium {
  border-left: 3px solid var(--kch-accent-500);
  background: linear-gradient(
    to right,
    rgba(212, 167, 58, 0.06),
    var(--tg-theme-section-bg-color) 40%
  );
}
.btn-premium {
  background: var(--kch-accent-500);
  color: var(--kch-surface-deep);
  box-shadow: var(--kch-gold-glow);
}
.badge-svip {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--kch-surface-deep);
  background: linear-gradient(135deg, var(--kch-highlight), var(--kch-accent-500));
  border-radius: var(--kch-radius-full);
}

/* Legal pages typography */
.prose {
  max-width: 640px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.7;
}
.prose h1 {
  font-family: var(--kch-font-display);
  font-size: 26px;
  margin: 0 0 var(--kch-space-4);
}
.prose h2 {
  font-family: var(--kch-font-display);
  font-size: 19px;
  margin: var(--kch-space-6) 0 var(--kch-space-2);
}
.prose p { margin: 0 0 var(--kch-space-3); }
.prose ul { padding-left: 20px; margin: 0 0 var(--kch-space-3); }
.prose li { margin-bottom: 4px; }
.prose a { color: var(--kch-primary-700); text-decoration: underline; }
.prose .meta {
  color: var(--kch-text-hint);
  font-size: 13px;
  margin-bottom: var(--kch-space-6);
}

/* 404 + error page */
.center-screen {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--kch-space-3);
}

/* === A11y === */
/* Skip-to-content link — visible only on keyboard focus, otherwise off-screen */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 1000;
  padding: 8px 12px;
  background: var(--kch-primary-600, #059669);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid var(--kch-accent-500, #d4a73a);
  outline-offset: 2px;
}
/* Tabbar active state — give it visible focus + bumped contrast */
.tabbar a[aria-current="page"] {
  color: var(--kch-primary-500, #10b981);
  font-weight: 600;
}
.tabbar a:focus-visible {
  outline: 2px solid var(--kch-accent-500, #d4a73a);
  outline-offset: 2px;
  border-radius: 4px;
}

/* prefers-reduced-motion — disable Path A signature motifs */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}