/* Workforce design tokens for Django templates — synced from packages/ui/src/tokens.css */

:root {
  --brand-50: #eef0ff;
  --brand-100: #e0e2ff;
  --brand-200: #c6c9ff;
  --brand-300: #a3a6fc;
  --brand-400: #7e80f7;
  --brand-500: #6366f1;
  --brand-600: #5b5bd6;
  --brand-700: #4a48b8;
  --brand-800: #3c3a93;
  --brand-900: #2f2d70;
  --brand-950: #1e1c47;

  --neutral-0: #ffffff;
  --neutral-50: #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-600: #475569;
  --neutral-900: #0f172a;

  --background: var(--neutral-50);
  --foreground: var(--neutral-900);
  --card: var(--neutral-0);
  --border: var(--neutral-200);
  --primary: var(--brand-600);
  --primary-foreground: #ffffff;
  --muted-foreground: var(--neutral-600);
  --success-solid: #059669;
  --danger-solid: #dc2626;

  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  line-height: 1.5;
}

.wf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.wf-btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}
.wf-btn-primary:hover {
  background: var(--brand-700);
}
.wf-btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--foreground);
}
.wf-btn-outline:hover {
  background: var(--neutral-100);
}

.wf-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
}

.wf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.wf-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  background: var(--neutral-100);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.wf-table td {
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--neutral-100);
}
.wf-table td.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.wf-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--neutral-100);
  color: var(--neutral-600);
}
.wf-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.wf-badge-success::before { background: var(--success-solid); }
.wf-badge-danger::before { background: var(--danger-solid); }