/* Blue / light blue / white color template */
:root {
  --ink: #0b2f5b;
  --ink-soft: #1a4a86;
  --paper: #eef6fc;
  --white: #ffffff;
  --line: #c9e2f5;
  --gold: #0b3d8c;
  --gold-deep: #082c66;
  --crimson: #0b3d8c;
  --muted: #5a7ea3;
  --navy: #0b3d8c;
  --sky: #4ea8de;
  --sky-soft: #d7eefb;
  --shadow: 0 18px 50px rgba(11, 47, 91, 0.12);
}

body {
  background:
    radial-gradient(circle at 0% 0%, rgba(78, 168, 222, .18), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--paper) 100%);
}

.site-header {
  background: var(--navy);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.brand-mark {
  border-color: #fff;
  color: #fff;
  background: rgba(255,255,255,.08);
}

.nav-links a, .nav-links button, .nav-links span {
  color: #e8f4fc;
}

.sponsor-bar {
  background: #16548a;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.16);
}

.sponsor-label { color: #d7eefb; }
.sponsor-item { color: #fff; }

.btn-gold,
.btn-dark,
.btn-crimson {
  background: var(--navy);
  color: #fff;
}

.btn-gold:hover,
.btn-dark:hover,
.btn-crimson:hover {
  background: var(--gold-deep);
  color: #fff;
}

.btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,.35);
}

.btn-outline {
  background: #fff;
  border-color: var(--sky);
  color: var(--navy);
}

.hero {
  background:
    radial-gradient(circle at 82% 18%, rgba(78, 168, 222, .45), transparent 34%),
    linear-gradient(160deg, #0b3d8c 0%, #1565c0 48%, #4ea8de 100%);
  color: #fff;
}

.kicker {
  color: #d7eefb;
}

.hero p { color: #e8f4fc; }

.badge {
  background: var(--navy);
  color: #fff;
}

.progress { background: var(--sky-soft); }
.progress > span { background: var(--navy); }

.about ul { color: var(--ink-soft); }

.portrait {
  background:
    linear-gradient(180deg, rgba(11, 61, 140, .15), rgba(11, 61, 140, .72)),
    repeating-linear-gradient(135deg, #4ea8de 0 12px, #1565c0 12px 24px);
}

.site-footer {
  background: var(--navy);
  color: #d7eefb;
}

.social-link {
  background: rgba(255,255,255,.14);
  color: #fff;
}

.social-link:hover {
  background: #fff;
  color: var(--navy);
}

.week h3 {
  background: var(--navy);
  color: #fff;
}

.sidebar {
  background: var(--navy);
  color: #e8f4fc;
}

.sidebar-lesson.active {
  background: rgba(255,255,255,.14);
  color: #fff;
}

.placeholder-play .orb {
  border-color: #fff;
  color: #fff;
  background: var(--navy);
}

.flash-ok, .alert-ok { background: #e3f4fb; color: #0b3d8c; }
.flash-err, .alert-err { background: #fdecee; color: #8b1c24; }