:root {
  --font-sans: Inter, Aptos, Arial, sans-serif;

  --color-brand-red: #C8102E;
  --color-brand-red-soft: #FDECEF;

  --color-ink-900: #111827;
  --color-ink-600: #6B7280;

  --color-surface-page: #F5F7FA;
  --color-surface-card: #FFFFFF;
  --color-surface-border: #E5E7EB;

  --color-status-green: #22C55E;
  --color-status-amber: #F59E0B;
  --color-status-red: #EF4444;

  --radius-field: 10px;
  --radius-button: 12px;
  --radius-card: 18px;

  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  --shadow-card: 0 8px 24px rgba(17, 24, 39, 0.04);
}

body {
  font-family: var(--font-sans);
  background: var(--color-surface-page);
  color: var(--color-ink-900);
}

.tcc-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.tcc-btn-primary {
  background: var(--color-brand-red);
  color: white;
  border-radius: var(--radius-button);
}

.tcc-btn-secondary {
  background: white;
  color: var(--color-ink-900);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-button);
}

.tcc-badge-green { background: var(--color-status-green); color: white; }
.tcc-badge-amber { background: var(--color-status-amber); color: white; }
.tcc-badge-red   { background: var(--color-status-red);   color: white; }