/* Myelin 2.0 design tokens — Cyber Genius Contest theme */

:root {
  /* brand */
  --purple: #660099;
  --purple-700: #7e22ce;
  --purple-tint: #f5eff7;
  --purple-50: #faf5ff;
  --purple-border: #e9d4ff;
  --grad: linear-gradient(135deg, #7c1aaf 0%, #660099 58%, #520082 100%);

  /* surfaces & text */
  --page-bg: #f7f8fa;
  --card: #ffffff;
  --card-border: #e9def4;
  --line: #edeaf2;
  --heading: #101828;
  --body: #364153;
  --muted: #4a5565;

  /* semantic */
  --blue: #155dfc;
  --green: #00a63e;
  --orange: #ea580c;
  --rose: #e11d48;
  --amber: #d97706;

  /* shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* elevation */
  --shadow-card: 0 2px 10px rgba(27, 21, 38, 0.04);
  --shadow-hero: 0 8px 24px -10px rgba(102, 0, 153, 0.6);
}

/* Base typography */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  font-weight: 500;
  color: var(--body);
  background: var(--page-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  color: var(--heading);
  font-weight: 700;
}

/* Card surface */
.card {
  background: var(--card);
  border: 1.5px solid var(--card-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--line);
  padding: 16px 18px;
  font-weight: 600;
}
.card-body {
  padding: 16px 18px;
  color: var(--body);
}

/* Buttons — purple primary; also fold btn-warning into the same look */
.btn {
  border-radius: var(--r-md);
  font-weight: 600;
  padding: 8px 20px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-primary,
.btn-warning {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-warning:hover,
.btn-warning:focus {
  background: var(--purple-700);
  border-color: var(--purple-700);
  color: #fff;
}
.btn-primary.disabled,
.btn-primary:disabled,
.btn-warning.disabled,
.btn-warning:disabled {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
  opacity: 0.55;
  cursor: not-allowed;
}

/* Form controls — purple focus */
.form-control {
  border-radius: var(--r-sm);
}
.form-control:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 0.2rem rgba(102, 0, 153, 0.15);
}
.requiredField::after {
  content: " *";
  color: var(--rose);
}

/* Winner tables */
.custom-table {
  border-radius: var(--r-md);
  overflow: hidden;
}
.custom-table thead tr th,
.custom-table thead tr.reportTable th {
  background: var(--purple-tint);
  color: var(--purple);
  font-weight: 700;
  border-color: var(--purple-border);
}
.custom-table td {
  color: var(--body);
  vertical-align: middle;
}
.rank-badge {
  display: inline-block;
  background: var(--purple-tint);
  color: var(--purple);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  font-weight: 700;
  font-size: 12px;
}
.grade-badge {
  display: inline-block;
  background: var(--purple-tint);
  color: var(--purple);
  border: 1px solid var(--purple-border);
  border-radius: var(--r-pill);
  padding: 2px 12px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
}
.payment-note {
  background: var(--purple-tint);
  border: 1px solid var(--purple-border);
  border-radius: var(--r-sm);
  color: var(--purple);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-weight: 600;
}
.attractive-title {
  color: var(--purple);
  font-weight: 700;
  font-size: 18px;
  margin: 16px 0 8px;
}

/* Text helpers used by existing markup */
.text-grey {
  color: var(--muted) !important;
}
.text-orange {
  color: var(--purple) !important;
}

/* Optional utility class for the "Registration opens on ..." / "Registrations are closed" states
   (existing inline colors will be swapped to hex tokens directly in the templates). */
.status-open  { color: var(--green); }
.status-soon  { color: var(--amber); }
.status-closed{ color: var(--rose); }
.status-info  { color: var(--blue); }