:root {
  --ui-font-sans: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.5rem;
  --ui-space-6: 2rem;

  --ui-text-xs: 0.75rem;
  --ui-text-sm: 0.875rem;
  --ui-text-md: 1rem;
  --ui-text-lg: 1.25rem;
  --ui-text-xl: 1.5rem;
  --ui-text-2xl: 2rem;

  --ui-color-bg: #ffffff;
  --ui-color-surface: #f8f9fa;
  --ui-color-text: #111111;
  --ui-color-muted: #6c757d;
  --ui-color-border: #e9ecef;
  --ui-color-primary: #111111;
  --ui-color-primary-contrast: #ffffff;

  --ui-status-success: #198754;
  --ui-status-warning: #ffc107;
  --ui-status-danger: #dc3545;
  --ui-status-info: #0dcaf0;

  --ui-radius-sm: 0.375rem;
  --ui-radius-md: 0.5rem;
  --ui-radius-lg: 0.75rem;
}

.ui-card-clean {
  border: 1px solid var(--ui-color-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-color-bg);
}

.ui-section-title {
  font-size: var(--ui-text-lg);
  font-weight: 600;
  margin-bottom: var(--ui-space-3);
}

.ui-muted {
  color: var(--ui-color-muted);
}

.btn-kiru {
  min-height: 44px;
  border-radius: var(--ui-radius-sm);
  padding: 0.6rem 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid #111;
}

.btn-kiru-primary {
  background: #111;
  color: #fff;
}

.btn-kiru-primary:hover,
.btn-kiru-primary:focus {
  background: #000;
  color: #fff;
}

.btn-kiru-secondary {
  background: #fff;
  color: #111;
}

.btn-kiru-secondary:hover,
.btn-kiru-secondary:focus {
  background: #f3f4f6;
  color: #111;
}

.btn-kiru-accent-ghostline {
  background: #ccff00;
  color: #111;
  border-color: #b3df00;
}

.btn-kiru-accent-ghostline:hover,
.btn-kiru-accent-ghostline:focus {
  background: #bdf100;
  color: #111;
}