/* TBCE Design Tokens — ported from vvitali.dev (personal-web-site-v2) */
:root {
  --card-bg: #ffffff;
  --card-border-width: 1px;
  --card-border-color: #eeeeee;
  --card-border-color-hover: var(--card-border-color);
  --card-radius: 8px;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
  --card-lift: -4px;
}

/* Flexbox Utilities */
.flex { display: flex; }
.flex-row { display: flex; flex-direction: row; flex-wrap: wrap; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }

/* Layout */
.container { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.section { padding: 64px 0; }
.section-light { background: #f8f9fa; }
.section-dark { background: #212529; color: #fff; }
.text-center { text-align: center; }
.mt-4 { margin-top: 2rem; }
.mb-4 { margin-bottom: 2rem; }
.mt-2 { margin-top: 0.5rem; }
.mb-2 { margin-bottom: 0.5rem; }

/* Cards */
.card {
  background: var(--card-bg);
  border: var(--card-border-width) solid var(--card-border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(var(--card-lift));
}

/* Buttons */
.btn-primary {
  background: #0d6efd;
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}
.btn-primary:hover { background: #0b5ed7; color: #fff; }

/* Grid helpers */
.row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.col-4 { flex: 0 0 33.333%; max-width: 33.333%; padding: 0 12px; }
.col-6 { flex: 0 0 50%; max-width: 50%; padding: 0 12px; }
.col-12 { flex: 0 0 100%; max-width: 100%; padding: 0 12px; }

@media (max-width: 768px) {
  .col-4, .col-6 { flex: 0 0 100%; max-width: 100%; }
}

/* Icons */
.icon-lg { font-size: 2.5rem; color: #0d6efd; margin-bottom: 16px; }