:root {
  --primary-color: #1FC7C1;
  --primary-dark: #0E6F73;
  --primary-light: #6FE3DE;

  --secondary-color: #6E3FAE;
  --secondary-dark: #2E1A52;
  --secondary-light: #9B6EDB;

  --tertiary-color: #D4A84F;
  --tertiary-dark: #6E4F1A;
  --tertiary-light: #F0D28A;

  --bg-main: #0B0F14;
  --bg-section: #131A22;
  --bg-card: #1E2630;

  --text-primary: #E6EDF3;
  --text-muted: #9AA7B2;
}

.branding-primary { color: var(--primary-color); }
.branding-secondary { color: var(--secondary-color); }
.branding-tertiary { color: var(--tertiary-color); }

.branding-muted { color: var(--text-muted); }
.branding-text { color: var(--text-primary); }

.branding-primary-bg { background-color: var(--primary-dark); }
.branding-secondary-bg { background-color: var(--secondary-color); }
.branding-tertiary-bg { background-color: var(--tertiary-color); }

.branding-bg-main { background-color: var(--bg-main); }
.branding-bg-section { background-color: var(--bg-section); }
.branding-bg-card { background-color: var(--bg-card); }

.btn-brand-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: #fff;
  border: none;
  transition: 0.2s ease;
}

.btn-brand-primary:hover {
  background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
  box-shadow: 0 0 10px rgba(31, 199, 193, 0.5);
}

.btn-brand-secondary {
  background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
  color: #fff;
}

.btn-brand-secondary:hover {
  background: linear-gradient(135deg, var(--secondary-light), var(--secondary-color));
}

.btn-brand-tertiary {
  background: linear-gradient(135deg, var(--tertiary-color), var(--tertiary-dark));
  color: #fff;
  border: none;
  transition: 0.2s ease;
}

.btn-brand-tertiary:hover {
  background: linear-gradient(135deg, var(--tertiary-light), var(--tertiary-color));
  box-shadow: 0 0 10px rgba(212, 168, 79, 0.5);
}

.glow-primary {
  box-shadow: 0 0 8px rgba(31, 199, 193, 0.6);
}

.glow-secondary {
  box-shadow: 0 0 8px rgba(110, 63, 174, 0.6);
}

.border-primary {
  border: 1px solid var(--primary-color);
}

.border-secondary {
  border: 1px solid var(--secondary-color);
}

.border-tertiary {
  border: 1px solid var(--tertiary-color);
}

.card-brand {
  background-color: var(--bg-card);
  border: 1px solid #2a3440;
  border-radius: 8px;
  padding: 1rem;
  color: var(--text-primary);
}

.gradient-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.gradient-dark {
  background: linear-gradient(180deg, var(--bg-main), var(--secondary-dark));
}