:root {
  --cc-primary: #00C7D9;
  --cc-primary-hover: #00C4D0;
  --cc-primary-active: #00C2CC;
  --cc-primary-deep: #00BFC8;
  --cc-dark: #37393A;
  --cc-background: #F2F2F2;
  --cc-white: #FFFFFF;
  --cc-muted: #6B7475;
  --cc-border: #D8E2E3;
  --cc-primary-soft: #E5F9FA;
  --primary: var(--cc-primary);
  --primary-2: var(--cc-dark);
  --secondary: var(--cc-primary);
  --accent: var(--cc-primary);
  --success: var(--cc-primary);
  --background: var(--cc-background);
  --surface: var(--cc-white);
  --ink: var(--cc-dark);
  --muted: var(--cc-muted);
  --line: var(--cc-border);
  --bs-primary: var(--cc-primary);
  --bs-primary-rgb: 0, 199, 217;
  --bs-success: var(--cc-primary);
  --bs-success-rgb: 0, 199, 217;
  --bs-link-color: var(--cc-primary-deep);
  --bs-link-hover-color: var(--cc-primary-deep);
}

body {
  font-family: "Maven Pro", sans-serif;
  background-color: var(--cc-background);
}

a { color: var(--cc-primary-deep); }
a:hover { color: var(--cc-primary-deep); }

.btn-primary {
  --bs-btn-color: var(--cc-dark);
  --bs-btn-bg: var(--cc-primary);
  --bs-btn-border-color: var(--cc-primary);
  --bs-btn-hover-color: var(--cc-dark);
  --bs-btn-hover-bg: var(--cc-primary-hover);
  --bs-btn-hover-border-color: var(--cc-primary-hover);
  --bs-btn-active-color: var(--cc-dark);
  --bs-btn-active-bg: var(--cc-primary-active);
  --bs-btn-active-border-color: var(--cc-primary-active);
  --bs-btn-disabled-color: var(--cc-dark);
  --bs-btn-disabled-bg: var(--cc-primary);
  --bs-btn-disabled-border-color: var(--cc-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--cc-primary-deep);
  --bs-btn-border-color: var(--cc-primary);
  --bs-btn-hover-color: var(--cc-dark);
  --bs-btn-hover-bg: var(--cc-primary);
  --bs-btn-hover-border-color: var(--cc-primary);
  --bs-btn-active-color: var(--cc-dark);
  --bs-btn-active-bg: var(--cc-primary-active);
  --bs-btn-active-border-color: var(--cc-primary-active);
}

.text-success, .link-success { color: var(--cc-primary-deep) !important; }
.bg-success, .btn-success, .border-success { --bs-success-rgb: 0, 199, 217; }
.bg-success, .btn-success { background-color: var(--cc-primary) !important; border-color: var(--cc-primary) !important; color: var(--cc-dark) !important; }
.progress-bar { background-color: var(--cc-primary); }

:focus-visible, .form-control:focus, .form-select:focus {
  --bs-focus-ring-color: rgba(0, 199, 217, .28);
}