/**
 * Design tokens — full palettes for day (light) and night (dark).
 * Use var(--color-*) everywhere in dashboard + quiz styles.
 */

/* ——— Day theme (default) ——— */
html[data-theme="light"],
html:not([data-theme]) {
  color-scheme: light;

  /* Surfaces */
  --color-bg-page: #f0f4f8;
  --color-bg-page-gradient: radial-gradient(
    ellipse 80% 50% at 10% -10%,
    rgba(109, 40, 217, 0.08),
    transparent 55%
  );
  --color-bg-surface: #ffffff;
  --color-bg-surface-muted: #f8fafc;
  --color-bg-banner: #f0f8ff;
  --color-bg-sign: linear-gradient(160deg, #fffbeb 0%, #ffffff 70%);
  --color-bg-sign-solid: #fffbeb;
  --color-bg-option: #fafbfc;
  --color-bg-option-hover: #ffffff;
  --color-bg-grid-cell: #f1f5f9;
  --color-bg-grid-current: #ffffff;
  --color-bg-stat-correct: #f0fdf4;
  --color-bg-stat-incorrect: #fef2f2;
  --color-bg-explanation: #eff6ff;
  --color-bg-bar: #e8e8e8;

  /* Text */
  --color-text-primary: #0f172a;
  --color-text-secondary: #334155;
  --color-text-muted: #64748b;
  --color-text-inverse: #ffffff;
  --color-text-explanation: #1e3a5f;
  --color-text-on-banner: #1a1a1a;

  /* Borders */
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-border-card: #e0e0e0;
  --color-border-sign: #fde68a;
  --color-divider: #e8ecf4;

  /* Brand / accent */
  --color-accent: #6d28d9;
  --color-accent-hover: #5b21b6;
  --color-accent-soft: #ede9fe;
  --color-accent-text: #6d28d9;

  /* Semantic */
  --color-correct: #16a34a;
  --color-correct-border: #86efac;
  --color-correct-bg: #f0fdf4;
  --color-correct-text: #166534;
  --color-incorrect: #dc2626;
  --color-incorrect-border: #fca5a5;
  --color-incorrect-bg: #fef2f2;
  --color-incorrect-text: #b91c1c;

  /* Progress & bars */
  --color-progress-track: #e2e8f0;
  --color-progress-fill: #6d28d9;
  --color-bar-fill: #4a90d9;
  --color-bar-text: #757575;

  /* Shadows */
  --color-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --color-shadow-md: 0 8px 28px rgba(15, 23, 42, 0.07);
  --color-shadow-hover: 0 2px 8px rgba(15, 23, 42, 0.1);

  /* Interactive */
  --color-link: #64748b;
  --color-link-hover: #6d28d9;
  --color-btn-primary: #6d28d9;
  --color-btn-primary-hover: #5b21b6;
  --color-option-hover-border: #c4b5fd;
  --color-letter-bg: #e2e8f0;
  --color-letter-text: #475569;
  --color-scrollbar: #cbd5e1;

  /* Header bar — day theme: light, clean strip */
  --header-bg: #ffffff;
  --header-border: #e7e5e4;
  --header-text: #1c1917;
  --header-muted: #78716c;
  --header-accent: #d97706;
  --header-subscribe: #c05621;
  --header-lang-active: #2563eb;
  --header-shadow: 0 1px 0 rgba(28, 25, 23, 0.05), 0 4px 18px rgba(28, 25, 23, 0.06);
}

/* ——— Night theme (premium soft dark — aurora / glass) ——— */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Deep navy base + blue left / amber right ambience */
  --color-bg-page: #0d1018;
  --color-bg-page-gradient:
    radial-gradient(ellipse 70% 90% at -8% 35%, rgba(59, 130, 246, 0.2), transparent 58%),
    radial-gradient(ellipse 55% 75% at 108% 25%, rgba(245, 158, 11, 0.16), transparent 52%),
    radial-gradient(ellipse 90% 55% at 50% -15%, rgba(99, 102, 241, 0.09), transparent 50%);

  --color-bg-glass: rgba(24, 30, 46, 0.72);
  --color-bg-glass-hover: rgba(32, 40, 58, 0.82);
  --color-bg-surface: rgba(26, 32, 48, 0.85);
  --color-bg-surface-elevated: linear-gradient(
    165deg,
    rgba(36, 44, 64, 0.9) 0%,
    rgba(22, 28, 42, 0.88) 100%
  );
  --color-bg-surface-muted: rgba(30, 36, 52, 0.75);
  --color-bg-banner: #1a2236;
  --color-accent-warm: #f59e0b;
  --color-accent-warm-soft: rgba(245, 158, 11, 0.15);
  --color-bg-sign: linear-gradient(
    165deg,
    rgba(250, 204, 21, 0.08) 0%,
    #1e2129 50%,
    #1a1d24 100%
  );
  --color-bg-sign-solid: #1e2129;
  --color-bg-option: rgba(255, 255, 255, 0.04);
  --color-bg-option-hover: rgba(255, 255, 255, 0.07);
  --color-bg-grid-cell: rgba(255, 255, 255, 0.06);
  --color-bg-grid-current: #22252e;
  --color-bg-stat-correct: rgba(34, 197, 94, 0.1);
  --color-bg-stat-incorrect: rgba(239, 68, 68, 0.1);
  --color-bg-explanation: rgba(99, 102, 241, 0.12);
  --color-bg-bar: rgba(255, 255, 255, 0.08);

  /* Soft typography — avoid harsh pure white on surfaces */
  --color-text-primary: #e4e9f0;
  --color-text-secondary: #b4becd;
  --color-text-muted: #8b97a8;
  --color-text-inverse: #ffffff;
  --color-text-explanation: #b8c8e8;
  --color-text-on-banner: #d8dee8;
  --color-text-card-title: #dce2eb;
  --color-text-card-meta: #94a0b2;
  --color-text-hero: #f0f3f8;

  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);
  --color-border-card: rgba(255, 255, 255, 0.1);
  --color-border-glass: rgba(255, 255, 255, 0.12);
  --color-border-sign: rgba(251, 191, 36, 0.35);
  --color-divider: rgba(255, 255, 255, 0.07);

  --color-accent: #f59e0b;
  --color-accent-hover: #fbbf24;
  --color-accent-soft: rgba(245, 158, 11, 0.14);
  --color-accent-text: #fbbf24;
  --color-accent-glow: rgba(245, 158, 11, 0.28);
  --color-accent-secondary: #60a5fa;

  --color-correct: #34d399;
  --color-correct-border: rgba(52, 211, 153, 0.45);
  --color-correct-bg: rgba(16, 185, 129, 0.12);
  --color-correct-text: #6ee7b7;
  --color-incorrect: #fb7185;
  --color-incorrect-border: rgba(251, 113, 133, 0.45);
  --color-incorrect-bg: rgba(244, 63, 94, 0.12);
  --color-incorrect-text: #fda4af;

  --color-progress-track: rgba(255, 255, 255, 0.08);
  --color-progress-fill: linear-gradient(90deg, #2563eb, #60a5fa);
  --color-bar-fill: linear-gradient(90deg, #3b82f6, #60a5fa);
  --color-bar-text: #9aa8ba;

  --color-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --color-shadow-md: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --color-shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);

  --color-link: #9aa5b8;
  --color-link-hover: #c4b5fd;
  --color-btn-primary: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%);
  --color-btn-primary-hover: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #fcd34d 100%);
  --color-option-hover-border: rgba(96, 165, 250, 0.45);
  --color-letter-bg: rgba(255, 255, 255, 0.07);
  --color-letter-text: #b8c2d4;
  --color-scrollbar: rgba(255, 255, 255, 0.15);

  --header-bg: rgba(10, 12, 20, 0.88);
  --header-border: rgba(255, 255, 255, 0.08);
  --header-backdrop: blur(12px);
  --header-text: #f0f2f5;
  --header-muted: #9aa3b2;
  --header-accent: #fcd34d;
  --header-subscribe: #fbbf24;
  --header-lang-active: #60a5fa;
}

/* Global page defaults from tokens */
body {
  color: var(--color-text-primary);
  background: var(--color-bg-page-gradient), var(--color-bg-page);
  background-color: var(--color-bg-page);
  background-attachment: fixed;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  transition: background 0.35s ease, color 0.25s ease;
}

/* ——— Night theme polish ——— */
html[data-theme="dark"] .practice-card,
html[data-theme="dark"] .dtc-question-card,
html[data-theme="dark"] .quiz-sidebar {
  background: var(--color-bg-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: var(--color-border-glass);
  box-shadow: var(--color-shadow-md);
}

html[data-theme="dark"] .practice-card:hover {
  background: var(--color-bg-glass-hover);
  box-shadow: var(--color-shadow-hover);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

html[data-theme="dark"] .practice-card__top {
  background: linear-gradient(145deg, #1e3a5f 0%, #1e2840 50%, #2d1f3d 100%);
}

html[data-theme="dark"] .practice-card__top::after {
  content: none;
}

html[data-theme="dark"] .practice-page,
html[data-theme="dark"] .quiz-body {
  background: var(--color-bg-page-gradient), var(--color-bg-page);
}

html[data-theme="dark"] .practice-card__bottom {
  background: transparent;
}

html[data-theme="dark"] .test-module .options-list .option-row {
  backdrop-filter: blur(4px);
}

html[data-theme="dark"] .grid-num.is-current {
  box-shadow: 0 0 0 2px var(--color-accent), 0 0 12px var(--color-accent-glow);
}

html[data-theme="dark"] .progress-fill {
  background: var(--color-progress-fill);
}

html[data-theme="dark"] .practice-card__bar-fill {
  background: var(--color-bar-fill);
}

html[data-theme="dark"] .btn-next {
  background: var(--color-btn-primary);
  box-shadow: 0 4px 16px var(--color-accent-glow);
}

html[data-theme="dark"] .btn-next:hover {
  background: var(--color-btn-primary-hover);
  box-shadow: 0 6px 22px var(--color-accent-glow);
}

html[data-theme="dark"] .explanation-block {
  border-left-color: var(--color-accent-secondary);
  box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.08);
}

html[data-theme="dark"] .site-header {
  background: var(--header-bg);
  backdrop-filter: var(--header-backdrop);
  -webkit-backdrop-filter: var(--header-backdrop);
  border-bottom-color: var(--header-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .practice-title__accent {
  color: var(--color-accent-warm);
}

html[data-theme="dark"] .practice-hero .practice-title {
  color: var(--color-text-hero);
}

html[data-theme="dark"] .practice-card__name {
  color: var(--color-text-card-title);
}

html[data-theme="dark"] .practice-card__meta,
html[data-theme="dark"] .practice-card__meta span {
  color: var(--color-text-card-meta);
}

html[data-theme="dark"] .practice-card__bar-text {
  color: var(--color-text-card-meta);
}

html[data-theme="dark"] .dtc-question-card .question-title,
html[data-theme="dark"] .test-module .option-text {
  color: var(--color-text-card-title);
}

html[data-theme="dark"] .quiz-sidebar,
html[data-theme="dark"] .sidebar-progress-top,
html[data-theme="dark"] .stat-value {
  color: var(--color-text-card-title);
}

html[data-theme="dark"] .grid-label,
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .quiz-question-meta,
html[data-theme="dark"] .dtc-question-card .no-sign {
  color: var(--color-text-card-meta);
}

html[data-theme="dark"] .grid-num {
  color: var(--color-text-muted);
}

html[data-theme="dark"] .grid-num.is-current {
  color: var(--color-accent-text);
}

html[data-theme="dark"] .option-letter {
  color: var(--color-text-muted);
}

/* ——— Global responsive base ——— */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

.site-page-content {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

@media (hover: none) {
  html[data-theme="dark"] .practice-card:hover {
    transform: none;
  }
}