:root {
  --cc-font: "Outfit", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --cc-display: "Sora", "Outfit", "Segoe UI Variable", sans-serif;
  --cc-r-xs: 8px;
  --cc-r: 12px;
  --cc-r-lg: 20px;
  --cc-r-xl: 28px;
  --cc-ctrl-h: 38px;
  --cc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cc-bg: #09111f;
  --cc-panel: #0d1728;
  --cc-surface: #17243a;
  --cc-text: #f2f7ff;
  --cc-muted: #b7c5d8;
  --cc-cyan: #22d3ee;
  --cc-cyan-deep: #0891b2;
  --cc-gold: #fbbf24;
  --cc-ok: #34d399;
  --cc-danger: #f87171;
  --cc-shadow: 0 18px 50px rgba(15, 23, 42, 0.16);
  --cc-shadow-lg: 0 28px 80px rgba(15, 23, 42, 0.28);
}

html, body {
  font-family: var(--cc-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, .act, .tb, .btn, input, select, textarea {
  font-family: inherit;
  transition:
    background 160ms var(--cc-ease),
    border-color 160ms var(--cc-ease),
    box-shadow 160ms var(--cc-ease),
    color 160ms var(--cc-ease);
}

.btn, button.primary, .act.primary {
  min-height: var(--cc-ctrl-h);
  border-radius: var(--cc-r);
  padding: 0 16px;
  font-weight: 650;
}

.btn.primary, button.primary, .act.primary {
  background: linear-gradient(180deg, var(--cc-cyan), var(--cc-cyan-deep));
  border: none;
  color: #042f2e;
  box-shadow: 0 8px 20px rgba(8, 145, 178, 0.28);
}

input, select, textarea {
  border-radius: var(--cc-r);
  min-height: var(--cc-ctrl-h);
  font-family: inherit;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--cc-cyan) 70%, transparent);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.22);
}

.card, .promo, .auth-box, .login-card, .gate-card, article, .panel {
  border-radius: var(--cc-r-lg);
}