/* CSS Pro Design System — the tools Catalyst installs. Same DNA as cssolutions.services:
   Inter + IBM Plex Mono, paper/ink neutrals, one cyan accent, hairlines, restrained depth.
   The Demo-kit Looks panel overrides --pro-* per palette. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* Neutrals */
  --pro-ink: #0f1522;
  --pro-ink-2: #3a4150;
  --pro-muted: #6b7280;
  --pro-line: rgba(15, 21, 34, 0.10);
  --pro-line-2: rgba(15, 21, 34, 0.22);
  --pro-bg: #f6f4ef;
  --pro-surface: #ffffff;
  --pro-surface-2: #f3f2ee;

  /* Brand (CSS) */
  --pro-brand: #0b8fb3;
  --pro-brand-dark: #086f8b;
  --pro-brand-soft: rgba(11, 143, 179, 0.12);

  /* Semantic */
  --pro-ok: #059669;
  --pro-ok-soft: #d1fae5;
  --pro-warn: #d97706;
  --pro-warn-soft: #fef3c7;
  --pro-danger: #dc2626;
  --pro-danger-soft: #fee2e2;
  --pro-info: #2563eb;
  --pro-info-soft: #dbeafe;

  /* Trade accents */
  --pro-hvac: #0284c7;
  --pro-multi: #0f766e;
  --pro-well: #047857;
  --pro-roof: #c2410c;
  --pro-lawn: #16a34a;

  /* Status (board / tech PWA) — themes remap under data-mall-theme */
  --pro-status-open: #94a3b8;
  --pro-status-arrived: #0ea5e9;
  --pro-status-working: #f59e0b;
  --pro-status-done: #10b981;
  --pro-status-cancelled: #cbd5e1;

  /* Crew avatars (tokenized gradients) */
  --pro-avatar-1: linear-gradient(135deg, var(--pro-hvac), #0369a1);
  --pro-avatar-2: linear-gradient(135deg, #0d9488, var(--pro-multi));
  --pro-avatar-3: linear-gradient(135deg, #ca8a04, #a16207);
  --pro-avatar-4: linear-gradient(135deg, #7c3aed, #5b21b6);
  --pro-avatar-5: linear-gradient(135deg, #db2777, #9d174d);
  --pro-avatar-fallback: linear-gradient(135deg, var(--pro-brand-dark), var(--pro-brand));

  /* Elevation */
  --pro-shadow-sm: 0 1px 2px rgba(15, 21, 34, 0.04);
  --pro-shadow: 0 1px 2px rgba(15, 21, 34, 0.04), 0 12px 32px -14px rgba(15, 21, 34, 0.16);
  --pro-shadow-lg: 0 2px 4px rgba(15, 21, 34, 0.05), 0 28px 60px -24px rgba(15, 21, 34, 0.26);

  /* Radius / space (8px grid) */
  --pro-r-sm: 6px;
  --pro-r: 10px;
  --pro-r-lg: 14px;
  --pro-r-xl: 20px;
  --pro-space-1: 4px;
  --pro-space-2: 8px;
  --pro-space-3: 12px;
  --pro-space-4: 16px;
  --pro-space-5: 24px;
  --pro-space-6: 32px;
  --pro-space-8: 48px;

  --pro-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pro-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pro-brand-ink: #ffffff;

  --pro-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pro-t: 0.18s var(--pro-ease);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.pro-body {
  margin: 0;
  font-family: var(--pro-font);
  color: var(--pro-ink);
  background: var(--pro-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}
.pro-body h1, .pro-body h2, .pro-body h3, .pro-body h4 { letter-spacing: -0.02em; line-height: 1.15; }
.pro-body .num, .pro-body [data-num], .pro-stat strong { font-variant-numeric: tabular-nums; }

.pro-mono {
  font-family: var(--pro-mono);
  font-size: 0.85em;
}

/* When a Looks palette is applied it sets ink/muted/line/bg/surface/brand; derive the
   secondary tokens from those so every component follows the palette. */
html[data-mall-theme] {
  --pro-ink-2: color-mix(in srgb, var(--pro-ink) 80%, var(--pro-bg));
  --pro-line-2: color-mix(in srgb, var(--pro-ink) 24%, transparent);
  --pro-surface-2: color-mix(in srgb, var(--pro-surface) 94%, var(--pro-ink));
}
html[data-mall-theme][data-surface-mode="dark"] { --pro-brand-ink: #ffffff; }