/*
 * Global UI design tokens and base element styling shared by all MCP tool apps. It establishes color, spacing, typography, and accessibility-friendly defaults.
 */
:root {
  color-scheme: light dark;

  /* Spec variables with light-dark() fallbacks (following customer-segmentation pattern).
     When a host provides --color-* via applyHostStyleVariables, the var() picks it up;
     otherwise the light-dark() fallback keeps the UI legible. */
  --bg: transparent;
  --panel: var(--color-background-primary, light-dark(#ffffff, #1e1e2e));
  --panel-subtle: var(--color-background-tertiary, light-dark(#f5f5f5, #2a2a3c));
  --panel-muted: var(--color-background-tertiary, light-dark(#f5f5f5, #2a2a3c));
  --text: var(--color-text-primary, light-dark(#1a1a2e, #e4e4ef));
  --text-secondary: var(--color-text-secondary, light-dark(#4a4a5a, #a0a0b8));
  --muted: var(--color-text-tertiary, light-dark(#94a3b8, #64748b));
  --border: var(--color-border-primary, light-dark(#e2e8f0, #334155));
  --accent: var(--color-text-info, light-dark(#2563eb, #60a5fa));
  --accent-hover: var(--color-text-info, var(--accent));
  --accent-soft: var(--color-background-info, var(--panel-subtle));
  --focus-ring: var(--color-border-primary, var(--accent));
  --shadow-sm: var(--shadow-sm, none);
  --success-bg: var(--color-background-success, var(--panel-subtle));
  --success-border: var(--color-border-success, var(--border));
  --success-text: var(--color-text-success, light-dark(#059669, #34d399));
  --error-bg: var(--color-background-danger, var(--panel-subtle));
  --error-border: var(--color-border-danger, var(--border));
  --error-text: var(--color-text-danger, light-dark(#dc2626, #f87171));
  --warning-bg: var(--color-background-warning, var(--panel-subtle));
  --warning-border: var(--color-border-warning, var(--border));
  --warning-text: var(--color-text-warning, light-dark(#d97706, #fbbf24));
}

html {
  background: var(--bg);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans, system-ui, sans-serif);
  max-height: 32px;
  overflow: hidden;
}

body.dc-ready {
  max-height: none;
  overflow: auto;
  overflow: clip;
}

#app {
  min-height: 0;
}

.shell {
  max-width: none;
  margin: 0;
  padding: 6px;
}

.tool-shell.collapsed .panel {
  display: none;
}

.hidden {
  display: none !important;
}
