/* 1lessidiot design tokens — extracted from the live Chatwoot dashboard so this
   tool reads as one product with the inbox. Layers: primitive → semantic →
   component. See the design-system reference for the full rationale. */
:root {
  /* type + mono (Chatwoot ships Inter / InterDisplay) */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;

  /* type scale (Chatwoot --font-size-*) */
  --t-small: 14px; --t-default: 16px; --t-medium: 18px; --t-large: 20px; --t-larger: 22px; --t-big: 24px;
  /* spacing scale (Chatwoot --space-*) */
  --s-micro: 2px; --s-smaller: 4px; --s-small: 8px; --s-slab: 12px; --s-normal: 16px; --s-medium: 24px; --s-large: 32px; --s-larger: 48px;
  /* radius + elevation */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-full: 9999px;
  --sh-sm: 0 1px 2px rgba(16,24,40,.06); --sh-md: 0 4px 14px rgba(16,24,40,.09);
  /* motion */
  --dur-fast: 75ms; --dur-base: 150ms; --dur-moderate: 250ms; --dur-slow: 300ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-decelerate: cubic-bezier(0, 0, .2, 1);
  --ease-overshoot: cubic-bezier(.68, -.55, .265, 1.55);

  /* semantic — LIGHT (Radix slate + Chatwoot blue) */
  --bg: #f9f9fb; --surface: #ffffff; --subtle: #f0f0f3;
  --border: #e2e3e7; --border-strong: #d9d9e0;
  --text: #1c2024; --text-muted: #60646c; --text-subtle: #80838d;
  --primary: #2781f6; --primary-hover: #086de0; --primary-fg: #ffffff; --primary-tint: #e6f4fe;
  --success: #0d7d6f; --success-bg: #d7f9f3;
  --warning: #94620a; --warning-bg: #fef3d0;
  --danger: #c02454; --danger-solid: #e54666; --danger-bg: #fde8ec;
  --ring: rgba(39,129,246,.35);
  --card-bg: #ffffff; /* raised surface for list cards */

  /* WhatsApp preview — WhatsApp's own colours, not the app theme */
  --wa-screen: #e5ddd5; --wa-header: #075e54; --wa-bubble: #d7f8c5; --wa-text: #111b21; --wa-meta: #5b6b52; --wa-btn: #2781f6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111113; --surface: #18191b; --subtle: #212225;
    --border: #2e3135; --border-strong: #363a3f;
    --text: #edeef0; --text-muted: #b0b4ba; --text-subtle: #777b84;
    --primary: #2781f6; --primary-hover: #5aa2ff; --primary-fg: #ffffff; --primary-tint: rgba(39,129,246,.16);
    --success: #35c2ac; --success-bg: rgba(18,165,148,.16);
    --warning: #ffca41; --warning-bg: rgba(255,197,61,.14);
    --danger: #ff9db0; --danger-solid: #e54666; --danger-bg: rgba(229,70,102,.16);
    --ring: rgba(39,129,246,.45);
    --card-bg: #242629; /* lighter than the #18191b panel so cards lift off the page */
  }
}