:root {
  --wi-primary: #9fe870;
  --wi-primary-hover: #cdffad;
  --wi-primary-text: #163300;
  --wi-primary-disabled: #e2f6d5;
  --wi-ink: #0e0f0c;
  --wi-body: #454745;
  --wi-muted: #868685;
  --wi-canvas: #e8ebe6;
  --wi-soft: #e2f6d5;
  --wi-card: #ffffff;
  --wi-dark: #0e0f0c;
  --wi-border: rgba(14, 15, 12, 0.12);
  --wi-border-solid: #d5d7d4;
  --wi-error: #d03238;
  --wi-success: #054d28;
  --wi-forest: #163300;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--wi-ink);
  background: var(--wi-canvas);
}

.wi-display {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.wi-app input:not([type='checkbox']),
.wi-app select,
.wi-app textarea {
  border: 1px solid var(--wi-ink) !important;
  border-radius: 12px !important;
  background: var(--wi-card) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wi-app input:not([type='checkbox']):focus,
.wi-app select:focus,
.wi-app textarea:focus {
  outline: none !important;
  border-color: var(--wi-ink) !important;
  box-shadow: 0 0 0 2px rgba(14, 15, 12, 0.12) !important;
}

.wi-btn-primary {
  background: var(--wi-primary);
  color: var(--wi-primary-text);
  border-radius: 9999px;
  font-weight: 600;
  transition: transform 0.12s ease, background 0.15s ease;
}

.wi-btn-primary:hover:not(:disabled) {
  background: var(--wi-primary-hover);
  transform: scale(1.02);
}

.wi-btn-primary:active:not(:disabled) {
  transform: scale(0.98);
}

.wi-btn-primary:disabled {
  background: var(--wi-primary-disabled);
  color: var(--wi-muted);
  cursor: not-allowed;
  transform: none;
}

.wi-btn-secondary {
  background: var(--wi-canvas);
  color: var(--wi-ink);
  border: none;
  border-radius: 9999px;
  font-weight: 600;
  transition: transform 0.12s ease, background 0.15s ease;
}

.wi-btn-secondary:hover {
  background: #dfe3dd;
  transform: scale(1.02);
}

.wi-btn-pill {
  background: var(--wi-card);
  color: var(--wi-ink);
  border: 1px solid var(--wi-border-solid);
  border-radius: 9999px;
  font-weight: 600;
  font-size: 12px;
  transition: background 0.15s ease, transform 0.12s ease;
}

.wi-btn-pill:hover {
  background: var(--wi-canvas);
  transform: scale(1.02);
}

.wi-card {
  background: var(--wi-card);
  border-radius: 24px;
}

.wi-header {
  background: var(--wi-card);
  color: var(--wi-ink);
  border-bottom: 1px solid var(--wi-border-solid);
}

.wi-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--wi-ink);
}

.wi-money {
  font-weight: 600;
  color: var(--wi-ink);
  letter-spacing: -0.01em;
}

.wi-link {
  color: var(--wi-forest);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wi-link:hover {
  color: var(--wi-ink);
}

.wi-tab {
  color: var(--wi-muted);
  font-weight: 600;
  border-bottom: 3px solid transparent;
  padding-bottom: 12px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.wi-tab-active {
  color: var(--wi-ink);
  border-bottom-color: var(--wi-primary);
}

.wi-badge {
  background: var(--wi-soft);
  color: var(--wi-forest);
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
}

.wi-notice {
  background: var(--wi-canvas);
  border: 1px solid var(--wi-border-solid);
  border-radius: 16px;
  color: var(--wi-body);
}

.wi-dark-panel {
  background: var(--wi-dark);
  color: #ffffff;
}