:root {

  --primary-color: #6D28D9;
  --secondary-color: #EC4899;

  --success-color: #10B981;
  --warning-color: #F59E0B;
  --danger-color: #EF4444;

  --background-color: #F5F7FA;
  --surface-color: #FFFFFF;

  --text-color: #1F2937;
  --text-light: #6B7280;

  --border-radius: 16px;

  --shadow-small:
    0 2px 8px rgba(0,0,0,0.08);

  --shadow-medium:
    0 4px 16px rgba(0,0,0,0.12);
}

/*
 * Layout
 */

.ds-container {

  max-width: 1200px;
  margin: auto;
  padding: 20px;
}

.ds-section {

  margin-top: 40px;
  margin-bottom: 40px;
}

/*
 * Card
 */

.ds-card {

  background: var(--surface-color);

  border-radius:
    var(--border-radius);

  box-shadow:
    var(--shadow-small);

  padding: 20px;
}

/*
 * Buttons
 */

.ds-btn {

  padding: 12px 20px;

  border: none;

  border-radius:
    var(--border-radius);

  cursor: pointer;

  font-weight: bold;
}

.ds-btn-primary {

  background:
    var(--primary-color);

  color: white;
}

.ds-btn-secondary {

  background:
    var(--secondary-color);

  color: white;
}

/*
 * Badge
 */

.ds-badge {

  display: inline-block;

  padding: 6px 12px;

  border-radius: 999px;

  font-size: 12px;
}

.ds-badge-success {

  background:
    var(--success-color);

  color: white;
}

/*
 * Typography
 */

.ds-title {

  font-size: 32px;

  font-weight: bold;

  color:
    var(--text-color);
}

.ds-subtitle {

  font-size: 18px;

  color:
    var(--text-light);
}