@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --kaya-green: #4F8C32;
  --kaya-green-deep: #2F6B25;
  --kaya-forest: #294B38;
  --kaya-green-tint: #DCEFD3;
  --kaya-panel-2: #E8F2EB;
  --kaya-ink: #172A1E;
  --kaya-ink-2: #3D5647;
  --kaya-ink-3: #526A5A;
  --kaya-line: #C5D8CA;
  --kaya-line-soft: #D8E6DC;
  --kaya-line-strong: #91AB9A;
  --kaya-bg: #F3F7F4;
  --kaya-surface: #FFFFFF;
  --kaya-info: #2D6F8D;
  --kaya-info-tint: #DEEDF3;
  --kaya-warn: #8B5B0F;
  --kaya-warn-tint: #FFEDC9;
  --kaya-alert: #9E3E34;
  --kaya-alert-tint: #F8E0DC;
  --kaya-font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --kaya-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --kaya-radius-sm: 10px;
  --kaya-radius: 14px;
  --kaya-radius-lg: 18px;
  --kaya-shadow-card: 0 8px 24px rgba(39,71,52,.08);
  --kaya-shadow-float: 0 16px 40px rgba(39,71,52,.13);
}

body.kaya {
  background: var(--kaya-bg);
  color: var(--kaya-ink-2);
  font-family: var(--kaya-font);
}
.kaya-display { font-size: 48px; line-height: 1.04; font-weight: 700; color: var(--kaya-forest); letter-spacing: -.01em; }
.kaya-h1 { font-size: 34px; line-height: 1.1; font-weight: 700; color: var(--kaya-forest); letter-spacing: -.01em; }
.kaya-h2 { font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--kaya-ink); }
.kaya-h3 { font-size: 19px; line-height: 1.3; font-weight: 600; color: var(--kaya-ink); }
.kaya-body { font-size: 16px; line-height: 1.55; font-weight: 400; color: var(--kaya-ink-2); }
.kaya-small { font-size: 13px; line-height: 1.5; color: var(--kaya-ink-3); }
.kaya-kicker { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--kaya-green); }
.kaya-metric { font-family: var(--kaya-mono); font-weight: 600; color: var(--kaya-forest); font-variant-numeric: tabular-nums; }
.kaya-data { font-family: var(--kaya-mono); font-weight: 400; color: var(--kaya-ink-3); font-variant-numeric: tabular-nums; }
.kaya-btn {
  font-family: var(--kaya-font);
  font-weight: 700;
  font-size: 15px;
  padding: 11px 18px;
  border-radius: var(--kaya-radius-sm);
  border: 0;
  cursor: pointer;
  color: #fff;
  background: var(--kaya-green);
}
.kaya-btn:hover { background: var(--kaya-green-deep); }
.kaya-btn--ghost { background: transparent; color: var(--kaya-green-deep); font-weight: 600; }
.kaya-chip { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--kaya-green-tint); color: var(--kaya-green-deep); }
.kaya-card { background: var(--kaya-surface); border: 1px solid var(--kaya-line-soft); border-radius: var(--kaya-radius); box-shadow: var(--kaya-shadow-card); padding: 20px; }
.kaya-input { font-family: var(--kaya-font); font-size: 15px; padding: 11px 14px; color: var(--kaya-ink); background: var(--kaya-surface); border: 1px solid var(--kaya-line); border-radius: var(--kaya-radius-sm); }
.kaya-input:focus { outline: 2px solid var(--kaya-green); outline-offset: 1px; border-color: var(--kaya-green); }