:root,
html[data-theme="light"] {
  color-scheme: light;
  --theme-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --theme-bg-canvas: hsl(0 0% 100%);
  --theme-surface-1: hsl(0 0% 100%);
  --theme-surface-2: hsl(0 0% 98%);
  --theme-surface-3: hsl(240 4.8% 95.9%);
  --theme-border: hsl(240 5.9% 90%);
  --theme-text: hsl(240 10% 3.9%);
  --theme-text-muted: hsl(240 3.8% 46.1%);
  --theme-accent: hsl(240 5.9% 10%);
  --theme-accent-strong: hsl(240 5.9% 10%);
  --theme-accent-contrast: hsl(0 0% 98%);
  --theme-success: hsl(142.1 76.2% 36.3%);
  --theme-focus: hsl(240 5.9% 10%);

  --theme-radius-sm: 4px;
  --theme-radius-md: 6px;
  --theme-radius-lg: 8px;
  --theme-shadow-md: 0 8px 20px hsl(240 10% 3.9% / 0.08);
  --theme-shadow-lg: 0 10px 30px hsl(240 10% 3.9% / 0.10);
  --vgt-theme-filter: none;
}

html[data-theme="dark"],
html[data-theme="chrome-dark"] {
  color-scheme: dark;
  --theme-bg-canvas: hsl(240 10% 3.9%);
  --theme-surface-1: hsl(240 10% 3.9%);
  --theme-surface-2: hsl(240 3.7% 15.9%);
  --theme-surface-3: hsl(240 3.7% 15.9%);
  --theme-border: hsl(240 3.7% 15.9%);
  --theme-text: hsl(0 0% 98%);
  --theme-text-muted: hsl(240 5% 64.9%);
  --theme-accent: hsl(0 0% 98%);
  --theme-accent-strong: hsl(0 0% 98%);
  --theme-accent-contrast: hsl(240 5.9% 10%);
  --theme-success: hsl(142.1 70.6% 45.3%);
  --theme-focus: hsl(0 0% 98%);
  --theme-shadow-md: 0 8px 20px hsl(0 0% 0% / 0.28);
  --theme-shadow-lg: 0 10px 30px hsl(0 0% 0% / 0.36);
  --vgt-theme-filter: none;
}

html[data-theme="warm"] {
  color-scheme: dark;
  --theme-bg-canvas: #27120a;
  --theme-surface-1: #32170f;
  --theme-surface-2: #3f1e13;
  --theme-surface-3: #5b2b17;
  --theme-border: #6f3a26;
  --theme-text: #ffe7c8;
  --theme-text-muted: #c59b80;
  --theme-accent: #ff9151;
  --theme-accent-strong: #ff6a1a;
  --theme-accent-contrast: #fff4ea;
  --theme-success: #ffaa68;
  --theme-focus: #ff9f5c;
  --theme-shadow-md: 0 14px 36px rgba(150, 58, 20, 0.18);
  --theme-shadow-lg: 0 18px 44px rgba(150, 58, 20, 0.24);
  --vgt-theme-filter: hue-rotate(-8deg) saturate(1.1) contrast(1.04) brightness(0.98);
}

html[data-theme="aurora"] {
  color-scheme: dark;
  --theme-bg-canvas: #12152a;
  --theme-surface-1: #171d36;
  --theme-surface-2: #1e2642;
  --theme-surface-3: #2b3660;
  --theme-border: #3c4a72;
  --theme-text: #eaf1ff;
  --theme-text-muted: #96a6cc;
  --theme-accent: #66d4ff;
  --theme-accent-strong: #29b8ee;
  --theme-accent-contrast: #f0fbff;
  --theme-success: #69d9d2;
  --theme-focus: #70d8df;
  --theme-shadow-md: 0 14px 36px rgba(31, 116, 143, 0.16);
  --theme-shadow-lg: 0 18px 44px rgba(31, 116, 143, 0.2);
  --vgt-theme-filter: hue-rotate(8deg) saturate(1.08);
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--theme-bg-canvas);
  color: var(--theme-text);
  font-family: var(--theme-font-sans);
}

.app-shell {
  width: 100%;
  height: 100%;
}

#grid {
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* Reusable primitives for non-table UI in future projects/components */
.theme-card {
  background: var(--theme-surface-1);
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius-lg);
  box-shadow: var(--theme-shadow-md);
  color: var(--theme-text);
}

.theme-pill {
  background: linear-gradient(180deg, var(--theme-surface-2), var(--theme-surface-3));
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius-md);
  color: var(--theme-text);
}

.theme-input {
  background: var(--theme-surface-1);
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius-md);
  color: var(--theme-text);
}

.theme-input:focus {
  outline: none;
  border-color: var(--theme-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-focus) 28%, transparent);
}

.theme-btn {
  background: linear-gradient(180deg, var(--theme-accent-strong), color-mix(in srgb, var(--theme-accent-strong) 84%, black));
  border: 1px solid color-mix(in srgb, var(--theme-accent) 60%, var(--theme-border));
  border-radius: var(--theme-radius-md);
  color: var(--theme-accent-contrast);
}