/**
 * Kaching Mini App tokens (synced from prototypes/tokens/tokens.css).
 * Brand colors extracted from assets/kachin-logo.png.
 */

:root {
  /* Telegram theme vars (auto-injected in Mini App; fallback for browser 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: #28a85c;
  --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: #d14e4e;
  --tg-viewport-height: 100vh;
  --tg-viewport-stable-height: 100vh;

  /* Kaching brand palette */
  --kch-primary-50: #e9f8ef;
  --kch-primary-100: #c8eed4;
  --kch-primary-300: #6dc88e;
  --kch-primary-500: #28a85c;
  --kch-primary-700: #1e7a44;
  --kch-primary-900: #0e3a20;

  --kch-accent-50: #fdf6dc;
  --kch-accent-100: #fbe9a3;
  --kch-accent-300: #f0d670;
  --kch-accent-500: #d4a334;
  --kch-accent-700: #9a7421;
  --kch-accent-900: #5a430f;

  --kch-surface-deep: #0a1730;
  --kch-surface-elev: #18243f;
  --kch-surface-line: #2a3656;
  --kch-highlight: #f0e090;

  /* Glow shadows (borrowed from Claude Design v1 reference) */
  --kch-emerald-glow: 0 0 24px rgba(40, 168, 92, 0.30);
  --kch-gold-glow: 0 0 20px rgba(212, 163, 52, 0.35);

  /* 3-tier text hierarchy (for non-Telegram contexts) */
  --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);

  --kch-verdict-green: #28a85c;
  --kch-verdict-yellow: #d4a334;
  --kch-verdict-red: #e04545;

  /* Spacing */
  --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-font-family:
    -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue',
    'PingFang TC', 'PingFang SC', 'Noto Sans CJK TC', sans-serif;

  /* Display font for hero headings (Claude Design reference, system fallback) */
  --kch-font-display:
    "Space Grotesk", -apple-system, BlinkMacSystemFont, 'SF Pro Display',
    'PingFang TC', 'PingFang SC', sans-serif;
}

* {
  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, 23, 48, 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, 163, 52, 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);
}