/*
* 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: visible;
}
#app {
min-height: 0;
}
.shell {
max-width: none;
margin: 0;
padding: 6px;
}
.tool-shell.collapsed .panel {
display: none;
}
.hidden {
display: none !important;
}
