:root {
  /* Colors based on screenshots */
  --bg-color: #f5f5f5;
  --panel-bg: #ffffff;
  --text-color: #333333;
  --border-color: #e0e0e0;
  --primary-blue: #0078d4; /* Standard blue */
  --accent-green: #107c10; /* Success green */
  --accent-red: #d13438; /* Error red */
  --plate-color: #87ceeb; /* Sky blue for plate */
  --column-color: #90ee90; /* Light green for column */
  --bolt-color: #ffff00; /* Yellow for bolts */
  --concrete-color: #d3d3d3; /* Light gray for concrete */

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;

  /* Typography */
  --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  background-color: var(--bg-color);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
}

input, select, button {
  font-family: inherit;
  font-size: var(--font-size-md);
}

/* Utility classes */
.flex-row { display: flex; flex-direction: row; }
.flex-col { display: flex; flex-direction: column; }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.p-md { padding: var(--spacing-md); }
.card {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: var(--spacing-md);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}