/* ClinicFlow design tokens — shared across internal hub surfaces.
   Email templates intentionally override brand color per clinic. */
:root {
  /* Brand & action */
  --color-primary: #4f46e5;        /* indigo-600 — single primary across product chrome */
  --color-primary-hover: #4338ca;  /* indigo-700 */
  --color-primary-soft: #eef2ff;   /* indigo-50  — active/selected bg */
  --color-danger: #ef4444;
  --color-danger-soft: #fef2f2;

  /* Neutrals */
  --color-bg: #f8fafc;             /* slate-50  — single app background */
  --color-surface: #ffffff;
  --color-surface-muted: #f1f5f9;  /* slate-100 — subtle fills */
  --color-border: #e2e8f0;         /* slate-200 */
  --color-border-strong: #cbd5e1;  /* slate-300 — hover/active borders */

  /* Text */
  --color-text: #0f172a;           /* slate-900 */
  --color-text-muted: #475569;     /* slate-600 — body secondary (AA on --color-bg) */
  --color-text-subtle: #94a3b8;    /* slate-400 — labels, captions only */

  /* Radius — 3-step scale */
  --radius-sm: 6px;                /* inputs, chips */
  --radius-md: 10px;               /* buttons, small cards */
  --radius-lg: 16px;               /* cards, modals */

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Focus */
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px var(--color-primary);
}

*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}