/**
 * Avista Care dashboard — design tokens (single source of truth).
 *
 * Loaded first on dashboard pages (see Scripts.php). Everything else — the scoped
 * shortcode styles, the component primitives (avista-components.css), and future
 * views — references these variables instead of hardcoding values.
 *
 * Palette source: the "Avista Core Design System" Claude Design project
 * (projectId 0632251e-f4fd-4411-8251-3f673d9f0471, tokens/*): Avista indigo
 * (--indigo-600 #3858e9, the WordPress 7.0 Modern accent) is the primary action
 * colour, neutrals are the cool WP-admin grey ramp (#f0f0f1 page / #1d2327 text),
 * semantics follow WordPress conventions, and focus rings are indigo. Type is
 * Public Sans with IBM Plex Mono for figures. Radii: 4px controls / 10px cards /
 * 14px modals. The saas_app ui_kit is the layout reference.
 *
 * The client chat widget is deliberately OUTSIDE this system: its styling lives in
 * assets/widget/widget.js (Shadow DOM, per-client brand via Widget Studio config)
 * and must never inherit dashboard chrome tokens.
 */
@import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* Primary interactive (DS: btn-primary = indigo-600, hover 700, press 800) */
  --av-accent: #3858e9;
  --av-accent-strong: #2a44c9;
  --av-accent-soft: #eef1fe;
  --av-on-accent: #ffffff;

  /* Legacy alias — the Care DS "flag red" accent is retired; anything still
     referencing --av-red gets the Core danger hue. New code: --av-accent /
     --av-danger. */
  --av-red: #d63638;
  --av-red-strong: #b32d2e;
  --av-red-soft: #fcf0f1;
  --av-ring-focus: 0 0 0 2px #4b66ec, 0 0 0 5px rgba(56, 88, 233, 0.18);

  /* Text (Core grey ramp: heading 900 / muted 700 / subtle 600) */
  --av-ink: #1d2327;
  --av-muted: #50575e;
  --av-faint: #787c82;

  /* Interaction washes (nav rows / table rows: hover / selected) */
  --av-hover: #f6f7f8;
  --av-active: #f0f0f1;
  --av-selected: #eef1fe;

  /* Surfaces & lines */
  --av-surface: #ffffff;
  --av-surface-2: #f6f7f8;
  --av-fill: #f0f0f1;
  --av-line: #e4e5e7;
  --av-line-2: #d5d7da;
  --av-app-bg: #f0f0f1;

  /* Semantic (solid / soft bg / border trios) — WordPress-convention hues */
  --av-success: #008a20;        --av-success-soft: #edf7f0;  --av-success-line: #d3ecdb;
  --av-warn: #b98b0c;           --av-warn-soft: #fdf6e6;     --av-warn-line: #f7e8bf;
  --av-danger: #d63638;         --av-danger-soft: #fcf0f1;   --av-danger-line: #f8dcdd;
  --av-info: #2439a1;           --av-info-soft: #eef1fe;     --av-info-line: #c2cdfb;

  /* Radius (Core: 4 controls / 6 menus / 10 cards / 14 modals) */
  --av-radius-sm: 4px;
  --av-radius-md: 6px;
  --av-radius: 10px;
  --av-radius-lg: 14px;
  --av-radius-pill: 999px;

  /* Elevation — short, neutral-tinted; hairline borders do the structural work */
  --av-shadow: 0 1px 2px rgba(29, 35, 39, 0.06), 0 0 0 1px rgba(29, 35, 39, 0.04);
  --av-shadow-md: 0 2px 6px rgba(29, 35, 39, 0.08), 0 1px 2px rgba(29, 35, 39, 0.05);
  --av-shadow-lg: 0 8px 24px rgba(29, 35, 39, 0.10), 0 2px 6px rgba(29, 35, 39, 0.06);

  /* Type */
  --av-font: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --av-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --av-fs-xs: 11px;
  --av-fs-sm: 13px;
  --av-fs-base: 14px;
  --av-fs-md: 16px;
  --av-fs-lg: 18px;
  --av-fs-xl: 21px;

  /* Spacing scale (Core 2px base; steps kept at the dashboard's 4px rhythm) */
  --av-space-1: 4px;
  --av-space-2: 8px;
  --av-space-3: 12px;
  --av-space-4: 16px;
  --av-space-5: 20px;
  --av-space-6: 24px;

  /* Layout metrics (Core saas_app shell) */
  --av-sidebar-w: 236px;
  --av-topbar-h: 56px;
  --av-page-max: 1280px;

  /* Motion — Core standard curve, fast for controls */
  --av-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --av-dur: 0.12s;

  /* Loading veils (full-surface overlays while a view loads) */
  --av-veil: rgba(255, 255, 255, 0.85);
  /* Modal scrim */
  --av-scrim: rgba(29, 35, 39, 0.55);
}

/* ── Dark theme ───────────────────────────────────────────
   Activated by data-theme="dark" on <html> (see avista-theme.js). Avista Core
   defines no dark palette, so this is derived from the same grey ramp: WP-admin
   dark surfaces, light indigo actions, semantics lightened for contrast. */
[data-theme="dark"] {
  --av-accent: #6f85f1;
  --av-accent-strong: #9dadf7;
  --av-accent-soft: #2a3358;
  --av-on-accent: #10132b;

  --av-red: #f28587;
  --av-red-strong: #f6a9aa;
  --av-red-soft: #3c2223;
  --av-ring-focus: 0 0 0 2px #6f85f1, 0 0 0 5px rgba(111, 133, 241, 0.25);

  --av-ink: #f0f0f1;
  --av-muted: #c3c4c7;
  --av-faint: #8f9498;

  --av-hover: rgba(240, 240, 241, 0.06);
  --av-active: rgba(240, 240, 241, 0.10);
  --av-selected: #2a3358;

  --av-surface: #2c3338;
  --av-surface-2: #262b30;
  --av-fill: #3c434a;
  --av-line: #3c434a;
  --av-line-2: #50575e;
  --av-app-bg: #1d2327;

  --av-success: #6fcf8a;  --av-success-soft: #1e3325;  --av-success-line: #2e4a36;
  --av-warn: #eec25e;     --av-warn-soft: #3a3123;     --av-warn-line: #54452a;
  --av-danger: #f28587;   --av-danger-soft: #3c2223;   --av-danger-line: #5c3335;
  --av-info: #9dadf7;     --av-info-soft: #2a3358;     --av-info-line: #3d4a80;

  --av-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --av-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45);
  --av-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  --av-veil: rgba(29, 35, 39, 0.85);
  --av-scrim: rgba(0, 0, 0, 0.65);
}

/* ── Utility remap (light) ────────────────────────────────
   The dashboard's older views still carry Tailwind color utilities from the
   indigo era. With Avista Core the brand is indigo again, so the utilities map
   naturally onto the tokens — the markup keeps its vocabulary, the values come
   from the system. New code should use av-* primitives and tokens directly. */
.text-indigo-500, .text-indigo-600, .text-indigo-700,
.hover\:text-indigo-600:hover, .hover\:text-indigo-700:hover { color: var(--av-accent) !important; }
.bg-indigo-50, .bg-indigo-100,
.hover\:bg-indigo-50:hover, .hover\:bg-indigo-100:hover { background-color: var(--av-accent-soft) !important; }
.bg-indigo-500, .bg-indigo-600, .bg-indigo-700,
.hover\:bg-indigo-700:hover { background-color: var(--av-accent) !important; }
.border-indigo-100, .border-indigo-200, .border-indigo-300,
.hover\:border-indigo-200:hover, .hover\:border-indigo-300:hover { border-color: #c2cdfb !important; }
.border-indigo-500, .border-indigo-600,
.hover\:border-indigo-600:hover { border-color: var(--av-accent) !important; }
.shadow-indigo-200 { box-shadow: var(--av-shadow-md) !important; }
.ring-indigo-500, .ring-indigo-500\/20,
.focus\:ring-indigo-500:focus, .focus\:ring-indigo-500\/20:focus { --tw-ring-color: rgba(56, 88, 233, 0.20) !important; }

.text-emerald-500, .text-emerald-600, .text-emerald-700 { color: var(--av-success) !important; }
.bg-emerald-50, .bg-emerald-100 { background-color: var(--av-success-soft) !important; }
.bg-emerald-500 { background-color: var(--av-success) !important; }
.border-emerald-100, .border-emerald-200 { border-color: #d3ecdb !important; }

.text-amber-500, .text-amber-600, .text-amber-800, .text-amber-900 { color: var(--av-warn) !important; }
.bg-amber-50, .hover\:bg-amber-100:hover { background-color: var(--av-warn-soft) !important; }
.bg-amber-500 { background-color: var(--av-warn) !important; }
.border-amber-100, .border-amber-200, .border-amber-300 { border-color: #f7e8bf !important; }

.text-red-500, .text-red-600, .text-red-700 { color: var(--av-danger) !important; }
.bg-red-50, .bg-red-100 { background-color: var(--av-danger-soft) !important; }
.border-red-100, .border-red-200 { border-color: #f8dcdd !important; }

.font-mono { font-family: var(--av-font-mono) !important; }

/* ── Utility remap (dark) ─────────────────────────────────
   Dark equivalents for the same utility set. */
[data-theme="dark"] .bg-indigo-50, [data-theme="dark"] .bg-indigo-100,
[data-theme="dark"] .hover\:bg-indigo-50:hover, [data-theme="dark"] .hover\:bg-indigo-100:hover { background-color: #2a3358 !important; }
[data-theme="dark"] .bg-indigo-500, [data-theme="dark"] .bg-indigo-600, [data-theme="dark"] .bg-indigo-700,
[data-theme="dark"] .hover\:bg-indigo-700:hover { background-color: #4b66ec !important; }
[data-theme="dark"] .bg-emerald-50 { background-color: #1e3325 !important; }
[data-theme="dark"] .bg-red-50 { background-color: #3c2223 !important; }
[data-theme="dark"] .bg-amber-50, [data-theme="dark"] .hover\:bg-amber-100:hover { background-color: #3a3123 !important; }
[data-theme="dark"] .border-indigo-100, [data-theme="dark"] .border-indigo-200,
[data-theme="dark"] .border-indigo-300, [data-theme="dark"] .border-indigo-500,
[data-theme="dark"] .border-indigo-600, [data-theme="dark"] .hover\:border-indigo-600:hover { border-color: #3d4a80 !important; }
[data-theme="dark"] .border-red-100, [data-theme="dark"] .border-red-200 { border-color: #3c2223 !important; }
[data-theme="dark"] .border-emerald-100, [data-theme="dark"] .border-emerald-200 { border-color: #1e3325 !important; }
[data-theme="dark"] .border-amber-100, [data-theme="dark"] .border-amber-200,
[data-theme="dark"] .border-amber-300 { border-color: #3a3123 !important; }
[data-theme="dark"] .text-indigo-500, [data-theme="dark"] .text-indigo-600, [data-theme="dark"] .text-indigo-700,
[data-theme="dark"] .hover\:text-indigo-600:hover, [data-theme="dark"] .hover\:text-indigo-700:hover { color: #9dadf7 !important; }
[data-theme="dark"] .text-emerald-500, [data-theme="dark"] .text-emerald-600, [data-theme="dark"] .text-emerald-700 { color: #6fcf8a !important; }
[data-theme="dark"] .text-red-500, [data-theme="dark"] .text-red-600, [data-theme="dark"] .text-red-700 { color: #f28587 !important; }
[data-theme="dark"] .text-amber-500, [data-theme="dark"] .text-amber-600,
[data-theme="dark"] .text-amber-800, [data-theme="dark"] .text-amber-900 { color: #eec25e !important; }