/**
 * RubusCRM Design Tokens V2 — Visual Modernization Recovery
 * Premium modern SaaS CRM language (Attio / Linear / HubSpot density).
 * Loaded after styles.css + ui-v2.css; supersedes conflicting visual tokens for shell + pilots.
 */

:root {
  /* —— Neutrals —— */
  --v2-bg: #f3f4f6;
  --v2-bg-elevated: #eef0f3;
  --v2-surface: #ffffff;
  --v2-surface-muted: #f8f9fb;
  --v2-surface-sunken: #eceef2;
  --v2-border: #e2e5ea;
  --v2-border-strong: #c9ced6;

  /* —— Text —— */
  --v2-text: #111827;
  --v2-text-secondary: #4b5563;
  --v2-text-muted: #6b7280;
  --v2-text-faint: #9ca3af;
  --v2-text-inverse: #ffffff;

  /* —— Brand (Rubusoft teal) —— */
  --v2-brand: #0d9488;
  --v2-brand-strong: #0f766e;
  --v2-brand-soft: #ccfbf1;
  --v2-brand-ink: #115e59;

  /* —— Status —— */
  --v2-success: #059669;
  --v2-success-soft: #d1fae5;
  --v2-warning: #d97706;
  --v2-warning-soft: #fef3c7;
  --v2-danger: #dc2626;
  --v2-danger-soft: #fee2e2;
  --v2-info: #2563eb;
  --v2-info-soft: #dbeafe;

  /* —— Radii (restrained) —— */
  --v2-radius-xs: 4px;
  --v2-radius-sm: 6px;
  --v2-radius-md: 8px;
  --v2-radius-lg: 10px;
  --v2-radius-xl: 12px;

  /* —— Shadows (subtle depth) —— */
  --v2-shadow-xs: 0 1px 0 rgba(17, 24, 39, 0.04);
  --v2-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
  --v2-shadow-md: 0 1px 2px rgba(17, 24, 39, 0.04), 0 4px 12px rgba(17, 24, 39, 0.05);
  --v2-shadow-lg: 0 8px 24px rgba(17, 24, 39, 0.08);

  /* —— Spacing —— */
  --v2-space-1: 4px;
  --v2-space-2: 8px;
  --v2-space-3: 12px;
  --v2-space-4: 16px;
  --v2-space-5: 20px;
  --v2-space-6: 24px;
  --v2-space-8: 32px;

  /* —— Typography —— */
  --v2-font: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --v2-type-page: 1.375rem;
  --v2-type-page-lh: 1.3;
  --v2-type-section: 0.9375rem;
  --v2-type-body: 0.875rem;
  --v2-type-meta: 0.75rem;
  --v2-type-kpi: 1.5rem;

  /* —— Controls —— */
  --v2-control-h: 36px;
  --v2-control-h-sm: 32px;
  --v2-touch: 44px;

  /* —— Shell —— */
  --v2-sidebar-w: 248px;
  --v2-sidebar-collapsed-w: 72px;
  --v2-sidebar-bg: #0f172a;
  --v2-sidebar-ink: #e2e8f0;
  --v2-sidebar-muted: #94a3b8;
  --v2-sidebar-active: rgba(13, 148, 136, 0.18);
  --v2-sidebar-hover: rgba(255, 255, 255, 0.06);
  --v2-topbar-h: 56px;

  /* —— Bridge into legacy vars (pilot surfaces inherit) —— */
  --bg: var(--v2-bg);
  --surface: var(--v2-surface);
  --surface-raised: var(--v2-surface);
  --surface-muted: var(--v2-surface-muted);
  --ink: var(--v2-text);
  --muted: var(--v2-text-muted);
  --line: var(--v2-border);
  --accent: var(--v2-brand);
  --accent-strong: var(--v2-brand-strong);
  --accent-soft: var(--v2-brand-soft);
  --radius: var(--v2-radius-md);
  --radius-card: var(--v2-radius-lg);
  --btn-radius: var(--v2-radius-sm);
  --shadow: var(--v2-shadow-sm);
  --shadow-soft: var(--v2-shadow-xs);
  --shadow-card: var(--v2-shadow-sm);
}

body {
  background: var(--v2-bg);
  color: var(--v2-text);
  font-family: var(--v2-font);
}