/* SPK UI tokens. Keep these values purpose-based; component CSS should consume tokens, not hardcoded colors. */
:root {
  --spk-sidebar-width: 264px;
  --spk-sidebar-collapsed-width: 72px;
  --spk-topbar-height: 54px;

  --spk-bg: #eef3f7;
  --spk-surface: #fcfdff;
  --spk-surface-raised: #ffffff;
  --spk-surface-muted: #f1f5f9;
  --spk-chrome: #f7fafc;
  --spk-text: #16202a;
  --spk-muted: #64748b;
  --spk-line: #d3dde8;
  --spk-line-strong: #bcc8d6;
  --spk-ink: #111827;
  --spk-sidebar: #17212f;
  --spk-sidebar-soft: #202d3c;

  --spk-teal: #0f766e;
  --spk-teal-dark: #0b5f59;
  --spk-blue: #2563eb;
  --spk-amber: #d97706;
  --spk-red: #dc2626;
  --spk-green: #15803d;
  --spk-gray: #64748b;

  --spk-status-success-bg: #d8f6d5;
  --spk-status-success-fg: #123018;
  --spk-status-warning-bg: #fff6bf;
  --spk-status-warning-fg: #332900;
  --spk-status-info-bg: #dbeafe;
  --spk-status-info-fg: #052c65;
  --spk-status-neutral-bg: #e5e7eb;
  --spk-status-neutral-fg: #172033;
  --spk-status-danger-bg: #fee2e2;
  --spk-status-danger-fg: #7f1d1d;
  --spk-status-muted-bg: #e5e7eb;
  --spk-status-muted-fg: #172033;

  --spk-focus: 0 0 0 3px rgba(15, 118, 110, 0.22);
  --spk-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.08);
  --spk-shadow-lg: 0 14px 32px rgba(15, 23, 42, 0.18);

  --spk-radius-sm: 6px;
  --spk-radius-md: 8px;
  --spk-radius-lg: 10px;
  --spk-radius-xl: 14px;

  --spk-font-body: 'Manrope', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --spk-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, Menlo, monospace;

  --spk-density-page-x: 14px;
  --spk-density-page-y: 10px;
  --spk-density-card-pad-x: 12px;
  --spk-density-card-pad-y: 10px;
  --spk-density-control-height: 34px;
  --spk-density-control-height-sm: 30px;
  --spk-density-table-header: 38px;
  --spk-density-table-row: 40px;
  --spk-density-table-cell-y: 5px;
  --spk-density-table-cell-x: 8px;
  --spk-density-table-font: 0.8rem;
  --spk-density-label-font: 0.76rem;

  --spkmodern-accent: var(--spk-teal);
  --spkmodern-accent-dark: var(--spk-teal-dark);
  --spkmodern-accent-soft: rgba(15, 118, 110, 0.1);
  --spkmodern-border: var(--spk-line);
  --spkmodern-border-strong: var(--spk-line-strong);
  --spkmodern-text: var(--spk-text);
  --spkmodern-muted: var(--spk-muted);
  --spkmodern-surface: var(--spk-surface);
  --spkmodern-surface-raised: var(--spk-surface-raised);
  --spkmodern-surface-soft: var(--spk-surface-muted);
}

@media (max-width: 767.98px) {
  :root {
    --spk-density-page-x: 10px;
    --spk-density-table-row: 38px;
    --spk-density-table-cell-y: 6px;
  }
}