[data-theme="navy"] {
  --bg: #101722;
  --bg-grad-1: #101722;
  --bg-grad-2: #101722;
  --bg-radial-1: rgba(95, 125, 191, 0);
  --bg-radial-2: rgba(95, 125, 191, 0);
  --panel: #182230;
  --panel-soft: #1e2a3b;
  --surface: var(--panel);
  --surface-2: var(--panel-soft);
  --ink: #f1f6f4;
  --muted: #9aaac2;
  --line: rgba(232, 248, 242, 0.16);
  --brand: #5f7dbf;
  --brand-soft: rgba(95, 125, 191, 0.12);
  --primary: #5f7dbf;
  --primary-2: #5f7dbf;
  --accent: #5f7dbf;
  --accent-soft: rgba(95, 125, 191, 0.1);
  --success: #5f7dbf;
  --danger: #5f7dbf;
  --ghost: #6f7f9f;
  --shadow: none;
  --grid-line: rgba(95, 125, 191, 0.025);
}

[data-theme="navy"] body {
  background: var(--bg) !important;
  color: var(--muted) !important;
}

[data-theme="navy"] body > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 900px) {
  [data-theme="navy"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
      linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 40px 40px;
  }
}

[data-theme="navy"] :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .section-title,
  #heroTitle,
  #authTitle
) {
  font-family: "Space Grotesk", "Segoe UI", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  color: var(--ink) !important;
}

[data-theme="navy"] :is(p, li, dd, dt, .subtitle, .hint, .small-note, .meta) {
  color: var(--muted) !important;
}

[data-theme="navy"] :is(
  label,
  .meta,
  .meta-pill,
  .pill,
  .chip,
  .cost-pill,
  .course-price,
  .progress-pct,
  .chl-progress-pct,
  .time-box,
  .timer-box,
  #heroTimerValue,
  #moduleTimerValue,
  #authStatus,
  #authRoleBadge
) {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

[data-theme="navy"] :is(
  .progress-pct,
  .chl-progress-pct,
  .time-box,
  #heroTimerValue,
  #moduleTimerValue,
  .course-price
) {
  color: var(--ink) !important;
  font-size: clamp(1.4rem, 3vw, 2.4rem) !important;
  font-weight: 700 !important;
  line-height: 1.05;
  letter-spacing: 0.02em;
}

[data-theme="navy"] a {
  color: var(--accent) !important;
}

[data-theme="navy"] a:hover {
  color: var(--ink) !important;
}

[data-theme="navy"] :is(
  .topbar,
  .panel,
  .card,
  .hero,
  .subscribe-strip,
  .auth-shell,
  .account-box,
  .slide,
  .controls,
  .footer-nav,
  .settings-panel,
  .modal-card,
  .chip,
  .pill,
  .meta-pill,
  .cta-card,
  .course-card,
  .legal-card,
  .faq-item,
  .learning-panel,
  .admin-panel,
  .compare-table
) {
  background: var(--panel) !important;
  background-image: none !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

[data-theme="navy"] :is(.hero, .subscribe-strip, .cta-card, .course-card) {
  background: var(--panel-soft) !important;
}

[data-theme="navy"] :is(
  .hero,
  .hero p,
  .hero .subtitle,
  .hero .medical-disclaimer,
  .hero .eyebrow
) {
  color: var(--muted) !important;
}

[data-theme="navy"] :is(
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-muted,
  .tab-btn,
  .icon-btn,
  .password-toggle,
  .back-link
) {
  background: transparent !important;
  color: var(--ghost) !important;
  border: 1px solid var(--ghost) !important;
  box-shadow: none !important;
}

[data-theme="navy"] :is(
  .btn:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-muted:hover,
  .tab-btn:hover,
  .icon-btn:hover,
  .back-link:hover
) {
  background: rgba(95, 125, 191, 0.1) !important;
  color: var(--ink) !important;
  border-color: var(--accent) !important;
}

[data-theme="navy"] :is(.tab-btn.active, .btn-secondary.is-active) {
  background: rgba(95, 125, 191, 0.16) !important;
  color: var(--ink) !important;
  border-color: var(--accent) !important;
}

[data-theme="navy"] :is(input, select, textarea) {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}

[data-theme="navy"] ::placeholder {
  color: var(--muted) !important;
}

[data-theme="navy"] :focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}

[data-theme="navy"] .icon-btn svg,
[data-theme="navy"] .icon-btn svg * {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.6 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-theme="navy"] .logo-light {
  display: none;
}

[data-theme="navy"] .logo-dark {
  display: block;
}
