/* The light theme of the site (the default): the same layout, the palette of the app (mint, sky, lemon, coral on a light green-blue background).
   It is linked from every page (views/partials/top.ejs) and works under <html data-theme="light">; the dark theme is the plain styles.css.
   The visitor chooses the theme with the switch in the footer, the choice is kept in localStorage ("pb-theme").
   The illustrations of the app screens (.mk, .mk-dialog) are light too, as the real app is. */

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3fbf9;
  --bg-soft: #eaf5f2;
  --panel: #ffffff;
  --panel-2: #edf6f4;
  --line: #d6e6e2;
  --text: #2c4046;
  --muted: #5c727a;
  --accent: #008a70;
  --accent-2: #1479c7;
  --primary-action: #008a70;
  --danger: #d6443f;
  --warning: #a8780f;
  --shadow: 0 18px 50px rgba(30, 70, 62, 0.10);
}

html[data-theme="light"] body {
  background:
    radial-gradient(60% 40% at 88% 0%, rgba(22, 140, 229, 0.09), transparent 70%),
    radial-gradient(50% 35% at 0% 22%, rgba(0, 168, 135, 0.09), transparent 70%),
    linear-gradient(180deg, #f4fbf9, #fafdfc 45%, #f4f9fd);
}

/* buttons and badges on the accent color: white text instead of dark */
html[data-theme="light"] .pr-btn.primary,
html[data-theme="light"] .pr-step-n,
html[data-theme="light"] .pr-plan-badge,
html[data-theme="light"] .primary-button {
  color: #ffffff;
}

html[data-theme="light"] .pr-btn.primary:hover {
  background: #007560;
}

/* inputs, the captcha and the other fields that had dark backgrounds of their own */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] .medical-captcha-option,
html[data-theme="light"] .medical-captcha-targets span {
  background: #ffffff;
  color: var(--text);
}

html[data-theme="light"] th {
  background: linear-gradient(180deg, rgba(22, 140, 229, 0.10), rgba(0, 168, 135, 0.05));
  box-shadow: inset 0 -1px 0 rgba(22, 140, 229, 0.22);
}

/* the cards of the page */
html[data-theme="light"] .pr-trust,
html[data-theme="light"] .pr-plan,
html[data-theme="light"] .pr-steps li,
html[data-theme="light"] .pr-faq details,
html[data-theme="light"] .pr-table-wrap,
html[data-theme="light"] .mk-limits,
html[data-theme="light"] .lp-login {
  box-shadow: 0 1px 2px rgba(30, 70, 62, 0.05), 0 8px 24px rgba(30, 70, 62, 0.06);
}

html[data-theme="light"] .pr-plan.featured {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, #fff), #fff 45%);
  box-shadow: 0 0 0 1px var(--accent), 0 20px 50px rgba(0, 168, 135, 0.16);
}

html[data-theme="light"] .pr-pill {
  background: color-mix(in srgb, var(--warning) 9%, #fff);
}

html[data-theme="light"] .pr-cta {
  background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--accent) 14%, #fff), #fff 70%);
}

html[data-theme="light"] .lp-gift {
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--warning) 10%, #fff), #fff 70%);
}

html[data-theme="light"] .lp-row-art {
  background: radial-gradient(70% 70% at 50% 45%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 75%);
}

/* the illustrations of the app screens: the palette of the real app (Theme.kt) */
html[data-theme="light"] .mk,
html[data-theme="light"] .mk-dialog {
  color-scheme: light;
  --bg: #f3fcfa;
  --bg-soft: #f4fbf9;
  --panel: #ffffff;
  --panel-2: #eaf5f3;
  --line: #d9e9e6;
  --text: #3a4f54;
  --muted: #60777f;
  --accent: #00a887;
  --accent-2: #168ce5;
  --warning: #c9ac4e;
  --danger: #e75e58;
  --primary-action: #00a887;
  color: var(--text);
}

html[data-theme="light"] .mk {
  border-color: #cfdedb;
  background: linear-gradient(160deg, #ffffff, #eaf3f1);
  box-shadow: 0 30px 60px rgba(30, 70, 62, 0.18), 0 6px 16px rgba(30, 70, 62, 0.10);
}

html[data-theme="light"] .mk-screen {
  background: linear-gradient(180deg, #f4fbf9, #fafdfc 60%, #f4f9fd);
}

html[data-theme="light"] .mk-dialog {
  border-color: #cfdedb;
  background: #ffffff;
  box-shadow: 0 30px 60px rgba(30, 70, 62, 0.18), 0 6px 16px rgba(30, 70, 62, 0.10);
}

html[data-theme="light"] .mk-item,
html[data-theme="light"] .pr-note,
html[data-theme="light"] .mk-slot,
html[data-theme="light"] .mk-acc,
html[data-theme="light"] .mk-weekcard,
html[data-theme="light"] .mk-answer,
html[data-theme="light"] .mk-search {
  box-shadow: 0 1px 2px rgba(30, 70, 62, 0.06);
}

html[data-theme="light"] .mk-fab,
html[data-theme="light"] .mk-btns b.go,
html[data-theme="light"] .mk-week span.on,
html[data-theme="light"] .mk-bubble.user {
  color: #ffffff;
}

html[data-theme="light"] .mk-fab {
  box-shadow: 0 8px 18px rgba(0, 168, 135, 0.35);
}

html[data-theme="light"] .mk-badge.warn {
  color: #a3841f;
}

html[data-theme="light"] .mk-chip {
  background: #f1f8f6;
}

/* the camera view is dark in a light app as well */
html[data-theme="light"] .mk-viewfinder {
  background: radial-gradient(circle at 50% 40%, #2a3b44, #0d141a 75%);
}

html[data-theme="light"] .mk-code {
  background: #ffffff;
  color: #0b1216;
}

/* the other pages of the site (the cabinet, the admin pages, the forms) */
html[data-theme="light"] {
  --license-blue-bg: rgba(20, 121, 199, 0.12);
  --license-blue-border: rgba(20, 121, 199, 0.36);
  --license-blue-text: #1862a8;
}

html[data-theme="light"] .medical-captcha,
html[data-theme="light"] .tab-list,
html[data-theme="light"] tbody tr:nth-child(even) td {
  background: rgba(0, 120, 100, 0.035);
}

html[data-theme="light"] .medical-captcha .medical-captcha-option {
  background: #ffffff;
}

html[data-theme="light"] .ai-check-result {
  background: #f1f7f5;
  color: var(--text);
}

html[data-theme="light"] .status {
  background: #e8f1ee;
}

html[data-theme="light"] .site-footer {
  color: var(--muted);
}