/* Design System */
:root {
  --gray: #666;
  --orange: #f39c12;
  --blue: #1976d2;
  --purple: #9c27b0;
  --yellow: #fbc02d;
  --blue-light: #90caf9;
  --blue-medium: #42a5f5;
}

/* Universal Utility System */
.box {
  border-radius: 6px;
  padding: 12px;
  text-align: center;
}

.section {
  border-radius: 12px;
  padding: 20px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.wrapper {
  background: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  margin: 20px 0;
}

/* Semantic Component Classes */
.gitlab-section {
  border: 3px solid var(--orange);
  background: #fef3e2;
  min-width: 220px;
}

.squash-section {
  border: 4px solid var(--blue);
  background: #e3f2fd;
  min-width: 240px;
}

.section-title {
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
}

.box-purple { background: #f3e5f5; border: 2px solid var(--purple); }
.box-white { background: #fff; border: 2px solid var(--blue-light); }
.box-yellow { background: #fff9c4; border: 2px solid var(--yellow); }
.box-blue-light { background: #bbdefb; border: 2px solid var(--blue); }
.box-blue-medium { background: #fff; border: 2px solid var(--blue-medium); }

.arrow {
  text-align: center;
  margin: 8px 0;
  color: var(--gray);
}

.arrow-horizontal {
  text-align: center;
  min-width: 120px;
}

/* Utility helpers */
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.text-sm { font-size: 0.85em; }
.text-xs { font-size: 0.8em; }
.text-md { font-size: 0.9em; }
.text-lg { font-size: 1.1em; }
.text-xl { font-size: 1.2em; }
.text-2xl { font-size: 2em; }
.text-gray { color: var(--gray); }
.text-orange { color: var(--orange); }
.text-blue { color: var(--blue); }
.bold { font-weight: bold; }

/* Component Styles */
.ci-cd-diagram-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}