/* ui_common.css
   Lot 1: shared visual foundation for pages that expose cards, pills and meta blocks.
   Keeps the current brand identity while reducing visual drift. */

:root {
  --ui-surface-card: #ffffff;
  --ui-surface-soft: #f8fafc;

  --ui-text-main: #0f172a;
  --ui-text-muted: #64748b;

  --ui-accent: #1e40af;
  --ui-accent-soft: rgba(30, 64, 175, 0.10);

  --ui-border-soft: rgba(15, 23, 42, 0.10);
  --ui-border-strong: rgba(30, 64, 175, 0.22);

  --ui-radius-card: 14px;
  --ui-radius-soft: 12px;
  --ui-radius-pill: 999px;

  --ui-shadow-card: 0 8px 20px rgba(15, 23, 42, 0.06);
  --ui-shadow-card-hover: 0 14px 30px rgba(15, 23, 42, 0.12);

  --ui-card-topbar: linear-gradient(90deg, #2563eb 0%, #60a5fa 45%, #93c5fd 100%);
  --ui-card-tint: linear-gradient(180deg, rgba(37, 99, 235, 0.06) 0%, rgba(37, 99, 235, 0.00) 86px);

  --ui-chip-bg: rgba(148, 163, 184, 0.12);
  --ui-chip-border: rgba(100, 116, 139, 0.28);
  --ui-chip-text: #334155;

  --ui-chip-accent-bg: rgba(37, 99, 235, 0.12);
  --ui-chip-accent-border: rgba(37, 99, 235, 0.24);
  --ui-chip-accent-text: #1e3a8a;
}

[data-theme="dark"] {
  --ui-surface-card: #1f2937;
  --ui-surface-soft: #111827;

  --ui-text-main: #e5e7eb;
  --ui-text-muted: #cbd5e1;

  --ui-accent: #60a5fa;
  --ui-accent-soft: rgba(96, 165, 250, 0.18);

  --ui-border-soft: rgba(148, 163, 184, 0.35);
  --ui-border-strong: rgba(147, 197, 253, 0.40);

  --ui-shadow-card: 0 10px 22px rgba(0, 0, 0, 0.30);
  --ui-shadow-card-hover: 0 16px 30px rgba(0, 0, 0, 0.38);

  --ui-card-topbar: linear-gradient(90deg, #60a5fa 0%, #93c5fd 55%, #bfdbfe 100%);
  --ui-card-tint: linear-gradient(180deg, rgba(96, 165, 250, 0.14) 0%, rgba(96, 165, 250, 0.00) 96px);

  --ui-chip-bg: rgba(148, 163, 184, 0.16);
  --ui-chip-border: rgba(148, 163, 184, 0.45);
  --ui-chip-text: #cbd5e1;

  --ui-chip-accent-bg: rgba(96, 165, 250, 0.18);
  --ui-chip-accent-border: rgba(147, 197, 253, 0.40);
  --ui-chip-accent-text: #dbeafe;
}

/* Optional utility classes for progressive migration */
.ui-card {
  background: var(--ui-surface-card);
  border: 1px solid var(--ui-border-soft);
  border-radius: var(--ui-radius-card);
  box-shadow: var(--ui-shadow-card);
}

.ui-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--ui-radius-pill);
  border: 1px solid var(--ui-border-soft);
  background: var(--ui-surface-soft);
  color: var(--ui-text-muted);
  font-weight: 800;
}

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