/**
 * SME Dashboard — Design System tokens (U-00)
 * Reference: case-study card — light surface on dark app shell.
 */

:root {
  /* ── Design system (light surfaces) ── */
  --ds-navy: #0f2744;
  --ds-surface: #ffffff;
  --ds-surface-muted: #f4f6f9;
  --ds-border: #e2e8f0;
  --ds-text: #1e293b;
  --ds-text-muted: #64748b;
  --ds-success: #10b981;
  --ds-success-bg: #10b981;
  --ds-success-dim: rgba(16, 185, 129, 0.12);
  --ds-danger: #ef4444;
  --ds-danger-dim: rgba(239, 68, 68, 0.12);
  --ds-info: #06b6d4;
  --ds-info-dim: rgba(6, 182, 212, 0.12);
  --ds-tag: #ca8a04;
  --ds-tag-text: #ffffff;
  --ds-chart: #2563eb;
  --ds-chart-fill: rgba(37, 99, 235, 0.15);

  /* ── App shell (dark chrome) ── */
  --app-bg: #0c1017;
  --app-header: #151b26;
  --app-border: #252f3f;
  --app-text: #f0f4f8;
  --app-text-muted: #7d8da6;

  /* ── Legacy aliases (dashboard dark theme — migrate gradually) ── */
  --bg: var(--app-bg);
  --card: var(--app-header);
  --card-elevated: #1a2230;
  --border: var(--app-border);
  --text: var(--app-text);
  --muted: var(--app-text-muted);
  --green: #34d399;
  --green-dim: rgba(52, 211, 153, 0.12);
  --red: #f87171;
  --red-dim: rgba(248, 113, 113, 0.12);
  --yellow: #fbbf24;
  --yellow-dim: rgba(251, 191, 36, 0.15);
  --blue: #60a5fa;
  --blue-dim: rgba(96, 165, 250, 0.15);
  --purple: #a78bfa;
  --purple-dim: rgba(167, 139, 250, 0.12);
  --gray-seg: #64748b;
  --orange: #fb923c;
  --orange-dim: rgba(251, 146, 60, 0.15);

  /* ── Radius scale ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ── Typography scale ── */
  --font-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --text-display-metric: 2.75rem;
  --text-card-title: 1.125rem;
  --text-body: 0.875rem;
  --text-label: 0.75rem;
  --text-tag: 0.6875rem;
  --weight-bold: 700;
  --weight-semibold: 600;
  --weight-medium: 500;

  /* ── Shadows ── */
  --shadow-card: 0 1px 3px rgba(15, 39, 68, 0.08);
  --shadow-card-hover: 0 8px 24px rgba(15, 39, 68, 0.12);

  /* ── Spacing ── */
  --space-card: 1.25rem;
  --space-section: 1rem;
}
