/* ═══════════════════════════════════════════════════════════════════
   RISING EDGE — Theme overrides
   Dark (default = :root in tokens.css)
   Light  → html[data-theme="light"]
   Night  → html[data-theme="night"]
═══════════════════════════════════════════════════════════════════ */

/* ── Light Theme ─────────────────────────────────────────────────── */
html[data-theme='light'] {
  --bg-page: #f8fafc;
  --bg-alt: #f1f5f9;
  --bg-card: #ffffff;
  --bg-muted: #e2e8f0;
  --bg-input: #ffffff;
  --bg-hover: #f1f5f9;

  --border: rgba(0, 0, 0, 0.09);
  --border-med: rgba(0, 0, 0, 0.15);
  --border-str: rgba(0, 0, 0, 0.24);

  --text-base: #0f172a;
  --text-sub: #334155;
  --text-muted: #4b5e78;
  --text-faint: #64748b;

  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);

  --gradient-hero: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 50%, #eff6ff 100%);
  --gradient-card: linear-gradient(135deg, #ffffff, #f8fafc);

  --primary-400: #2563eb;
  --primary-300: #1d4ed8;
  --cyan-400: #0369a1;
  --cyan-500: #0e7490;
  --success: #15803d;
  --warning: #b45309;
  --danger: #b91c1c;
}

/* ── Night-Reading Theme ─────────────────────────────────────────── */
html[data-theme='night'] {
  --bg-page: #13110c;
  --bg-alt: #1a1812;
  --bg-card: #211e16;
  --bg-muted: #2c2920;
  --bg-input: #211e16;
  --bg-hover: #333026;

  --border: rgba(240, 220, 180, 0.07);
  --border-med: rgba(240, 220, 180, 0.12);
  --border-str: rgba(240, 220, 180, 0.2);

  --text-base: #f5ead8;
  --text-sub: #d6c9b4;
  --text-muted: #a89880;
  --text-faint: #7a6a58;

  --primary-400: #f0c070;
  --primary-500: #e5a840;
  --primary-600: #c88820;
  --primary-700: #a06810;
  --primary-300: #f5d090;

  --cyan-400: #e8c878;
  --cyan-500: #d4b060;

  --success: #4ade80;
  --warning: #f0c070;
  --danger: #f87171;

  --gradient-hero: linear-gradient(135deg, #13110c, #1a1812, #13110c);
  --gradient-card: linear-gradient(135deg, #211e16, #2c2920);
  --text-gradient: linear-gradient(135deg, #f0c070, #e8a060);

  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(240, 192, 112, 0.06);
}

/* ── Theme transition ────────────────────────────────────────────── */
*,
*::before,
*::after {
  transition:
    background-color var(--dur-slow) var(--ease-out),
    border-color var(--dur-slow) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}
*[class*='btn'],
canvas,
svg,
img {
  transition: none;
}

/* ═══════════════════════════════════════════════════════════════════
   SUBSCRIPTION PAGES — Light-theme overrides
   Fixes hardcoded dark hex values in /subscription/*.html
═══════════════════════════════════════════════════════════════════ */

/* Hero */
html[data-theme='light'] .sub-hero {
  background: linear-gradient(160deg, #eff6ff 0%, #f0f9ff 60%, #eff6ff 100%) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme='light'] .sub-hero::before {
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px) !important;
}
html[data-theme='light'] .sub-hero-glow {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 70%) !important;
}

/* Amber notice — #fbbf24 invisible on white */
html[data-theme='light'] .courses-notice {
  color: #92400e !important;
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: rgba(180, 83, 9, 0.2) !important;
}

/* Popular plan — dark navy to soft blue tint */
html[data-theme='light'] .plan-card.popular {
  background: linear-gradient(160deg, #eff6ff 0%, #dbeafe 100%) !important;
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.25),
    0 8px 32px rgba(37, 99, 235, 0.1) !important;
}
html[data-theme='light'] .plan-card.popular:hover {
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.4),
    0 16px 48px rgba(37, 99, 235, 0.15) !important;
}

/* Premium plan — dark purple to soft violet tint */
html[data-theme='light'] .plan-card.premium-card {
  background: linear-gradient(160deg, #f5f3ff 0%, #ede9fe 100%) !important;
  border-color: rgba(139, 92, 246, 0.35) !important;
}
html[data-theme='light'] .plan-card.premium-card:hover {
  border-color: rgba(109, 40, 217, 0.5) !important;
}

/* #c4b5fd purple text — near-invisible on white, replace with deep violet */
html[data-theme='light'] .badge-purple {
  color: #6d28d9 !important;
  background: rgba(139, 92, 246, 0.1) !important;
  border-color: rgba(109, 40, 217, 0.2) !important;
}
html[data-theme='light'] .compare-table th.col-premium {
  color: #6d28d9 !important;
}
html[data-theme='light'] .check-lbl.purple {
  color: #6d28d9 !important;
}
html[data-theme='light'] .price-saving {
  color: #15803d !important;
}

/* Sub-status bar */
html[data-theme='light'] .sub-status-bar {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(6, 182, 212, 0.03)) !important;
  border-color: rgba(37, 99, 235, 0.18) !important;
}

/* Comparison table section header rows */
html[data-theme='light'] .compare-table .section-row td {
  background: #f1f5f9 !important;
}

/* Success page */
html[data-theme='light'] .success-page {
  background: linear-gradient(160deg, #f0f9ff 0%, #eff6ff 60%, #f0f9ff 100%) !important;
}

/* Failed page */
html[data-theme='light'] .failed-page {
  background: linear-gradient(160deg, #fff5f5 0%, #fef2f2 60%, #fff5f5 100%) !important;
}
html[data-theme='light'] .failed-card {
  border-color: rgba(239, 68, 68, 0.18) !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.07),
    0 0 0 1px rgba(239, 68, 68, 0.08) !important;
}

/* ── Night theme: subscription overrides ─────────────────────────── */
html[data-theme='night'] .sub-hero {
  background: linear-gradient(160deg, #13110c 0%, #1a1812 60%, #13110c 100%) !important;
}
html[data-theme='night'] .courses-notice {
  color: #f0c070 !important;
  background: rgba(240, 192, 112, 0.08) !important;
  border-color: rgba(240, 192, 112, 0.18) !important;
}
html[data-theme='night'] .plan-card.popular {
  background: linear-gradient(160deg, #1c1a14 0%, #211e16 100%) !important;
  border-color: rgba(240, 192, 112, 0.25) !important;
  box-shadow:
    0 0 0 1px rgba(240, 192, 112, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.3) !important;
}
html[data-theme='night'] .plan-card.premium-card {
  background: linear-gradient(160deg, #1c1a14 0%, #211e16 100%) !important;
  border-color: rgba(240, 192, 112, 0.18) !important;
}
html[data-theme='night'] .badge-purple {
  color: #c4b5fd !important;
}
html[data-theme='night'] .compare-table th.col-premium {
  color: #c4b5fd !important;
}
html[data-theme='night'] .check-lbl.purple {
  color: #c4b5fd !important;
}
html[data-theme='night'] .success-page {
  background: linear-gradient(160deg, #13110c, #1a1812, #13110c) !important;
}
html[data-theme='night'] .failed-page {
  background: linear-gradient(160deg, #13110c, #1a1812, #13110c) !important;
}