/*
 * WrapServicer v2 — design tokens
 *
 * Aesthetic: modern financial SaaS (Mercury / Ramp / Linear). Confident, calm,
 * data-dense. Rounded-lg corners, soft shadows, muted palette, Inter for UI,
 * JetBrains Mono for numbers.
 *
 * Source of truth for tokens lives in Tailwind config (app/templates/base.html).
 * This file is kept for CSS-only surfaces (emails, PDF exports, print) and
 * progressive enhancement that does not depend on Tailwind.
 */

:root {
  --ws-ink-50:  #F8FAFC;
  --ws-ink-100: #F1F5F9;
  --ws-ink-200: #E2E8F0;
  --ws-ink-300: #CBD5E1;
  --ws-ink-400: #94A3B8;
  --ws-ink-500: #64748B;
  --ws-ink-600: #475569;
  --ws-ink-700: #334155;
  --ws-ink-800: #1E293B;
  --ws-ink-900: #0F172A;

  --ws-brand-600: #4F46E5;
  --ws-brand-700: #4338CA;

  --ws-money-in:   #10B981;
  --ws-money-out:  #EF4444;
  --ws-money-warn: #F59E0B;
  --ws-money-info: #0EA5E9;

  --ws-radius-sm: 6px;
  --ws-radius-md: 10px;
  --ws-radius-lg: 14px;
  --ws-radius-xl: 20px;

  --ws-shadow-card: 0 1px 2px 0 rgb(15 23 42 / 0.04),
                    0 1px 3px 0 rgb(15 23 42 / 0.06);
  --ws-shadow-lift: 0 4px 12px -2px rgb(15 23 42 / 0.08),
                    0 2px 6px -2px rgb(15 23 42 / 0.04);

  --ws-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ws-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

/* Tabular numerals for anything that reads as money or a count */
.tabular,
.money,
.num {
  font-family: var(--ws-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Money semantics — color-blind-friendly pairs */
.money--in  { color: var(--ws-money-in); }
.money--out { color: var(--ws-money-out); }
.money--warn { color: var(--ws-money-warn); }