:root {
  /* Default theme (Slate dark) */
  --logo-text: #f8fafc;
  --logo-accent: #f97316;

  --ink: #ffffff;
  --body: #a3b3c9;
  --muted: #6d819c;
  --muted-soft: #536079;

  --canvas: #0b101a;
  --surface-soft: #151d2c;
  --surface-card: #151d2c;
  --surface-cream-strong: #33425c;
  --surface-dark: #151d2c;
  --surface-dark-elevated: #33425c;
  --surface-dark-soft: #1a2436;

  --hairline: #33425c;
  --hairline-soft: #2d3b52;

  --primary: #fb923c;
  --primary-active: #fdba74;
  --primary-disabled: #536079;
  --on-primary: #0b101a;

  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --accent-teal: #2dd4bf;
  --accent-amber: #fb923c;

  --on-dark: #ffffff;
  --on-dark-soft: #a3b3c9;

  --danger-bg: rgba(239, 68, 68, 0.15);
  --danger-bg-hover: rgba(239, 68, 68, 0.25);
  --danger-border: rgba(239, 68, 68, 0.3);
  --status-running-bg: rgba(34, 197, 94, 0.12);
  --status-stopped-bg: rgba(148, 163, 184, 0.12);
  --status-error-bg: rgba(239, 68, 68, 0.12);
  --status-deploying-bg: rgba(245, 158, 11, 0.12);
  --focus-glow: rgba(251, 146, 60, 0.2);
  --toast-shadow: rgba(0, 0, 0, 0.35);
  --modal-backdrop: rgba(11, 16, 26, 0.7);

  --font-display: "Cormorant Garamond", "Tiempos Headline", Garamond, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --ui-font-scale: 1;
  --ui-font-weight: 400;
  --ui-font-family: "Fira Code", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { font-size: calc(14px * var(--ui-font-scale)); }
body {
  font-family: var(--ui-font-family, var(--font-body));
  background-color: var(--canvas);
  color: var(--body);
  font-size: 1rem;
  font-weight: var(--ui-font-weight, 400);
  line-height: 1.55;
}
h1,h2,h3,h4 { font-family: var(--ui-font-family, var(--font-display)); color: var(--ink); font-weight: var(--ui-font-weight, 400); margin: 0; }
button { cursor: pointer; font-family: var(--ui-font-family, var(--font-body)); }
input, select, textarea {
  font-family: var(--ui-font-family, var(--font-body));
  background: var(--surface-soft);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 1rem;
  font-weight: var(--ui-font-weight, 400);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-glow);
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--hairline); }
th { font-weight: 500; color: var(--ink); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }