/* One blue accent system across the app, with separate light and dark values. */
:root {
  color-scheme: light;
  --background: #f5f8fc;
  --foreground: #243247;
  --card: #ffffff;
  --card-foreground: #243247;
  --primary: #2563eb;
  --primary-foreground: #ffffff;
  --secondary: #eaf1fa;
  --muted-foreground: #526176;
  --border: #d7e1ee;
  --ring: #2563eb;
  --shadow: 0 8px 28px rgba(25, 70, 130, .07);
  --paper: var(--background);
  --white: var(--card);
  --soft: var(--secondary);
  --text: var(--foreground);
  --navy: #183153;
  --deep: #29415e;
  --muted: var(--muted-foreground);
  --line: var(--border);
  --teal: var(--primary);
  --aqua: #eaf1ff;
  --lime: #dbeafe;
  --blue: #2563eb;
  --accent: var(--primary);
  --accent-soft: #eaf1ff;
  --accent-line: #b9cff1;
  --accent-ink: var(--primary-foreground);
  --red: #b42336;
  --red-bg: #fff0f1;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --background: #111a29;
  --foreground: #eff4fb;
  --card: #1c293b;
  --card-foreground: #eff4fb;
  --primary: #93c5fd;
  --primary-foreground: #10243d;
  --secondary: #27364b;
  --muted-foreground: #bdc9d8;
  --border: #40526a;
  --ring: #93c5fd;
  --shadow: 0 12px 32px rgba(0, 0, 0, .22);
  --paper: var(--background);
  --white: var(--card);
  --soft: var(--secondary);
  --text: var(--foreground);
  --navy: #eff4fb;
  --deep: #dce8f8;
  --muted: var(--muted-foreground);
  --line: var(--border);
  --teal: var(--primary);
  --aqua: #243b59;
  --lime: #314b70;
  --blue: #93c5fd;
  --accent: var(--primary);
  --accent-soft: #263d5c;
  --accent-line: #587ba7;
  --accent-ink: var(--primary-foreground);
  --red: #ff9da8;
  --red-bg: #402630;
}

body:not(.is-welcome) {
  background-color: var(--background);
  color: var(--foreground);
}

body:not(.is-welcome) [data-skill] {
  --accent: var(--primary);
  --accent-soft: var(--aqua);
  --accent-line: #b9cff1;
  --accent-ink: var(--primary-foreground);
}

html[data-theme="dark"] body:not(.is-welcome) [data-skill] {
  --accent-line: #587ba7;
}

body:not(.is-welcome) .button,
body:not(.is-welcome) .button-quiet,
body:not(.is-welcome) .theme-toggle {
  background-color: var(--card);
  color: var(--foreground);
  border-color: var(--border);
}

body:not(.is-welcome) .button-light {
  background-color: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--foreground);
}

body:not(.is-welcome) .button-light:hover {
  background-color: var(--secondary);
  border-color: var(--primary);
  color: var(--foreground);
}

body:not(.is-welcome) .button-primary,
body:not(.is-welcome) .explorer-tab[aria-pressed="true"],
body:not(.is-welcome) .level-switch button[aria-pressed="true"],
body:not(.is-welcome) .explore-skill-switch button.active,
body:not(.is-welcome) #screen-learn .learn-levels button[aria-pressed="true"] {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

body:not(.is-welcome) .button-primary:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
  filter: brightness(.94);
}

body:not(.is-welcome) .nav-link.active,
body:not(.is-welcome) .text-button,
body:not(.is-welcome) .question-header strong,
body:not(.is-welcome) .question-kicker,
body:not(.is-welcome) .attempt-heading strong,
body:not(.is-welcome) .attempt-card summary {
  color: var(--primary);
}

body:not(.is-welcome) .mobile-nav button[aria-current="page"],
body:not(.is-welcome) .journey-today,
body:not(.is-welcome) .journey-session-steps li.is-current,
body:not(.is-welcome) .journey-duration.is-current,
body:not(.is-welcome) .journey-calendar .has-activity,
body:not(.is-welcome) .level-badge,
body:not(.is-welcome) .skill-symbol,
body:not(.is-welcome) .tile-symbol,
body:not(.is-welcome) .start-icon,
body:not(.is-welcome) .method-strip {
  background-color: var(--accent-soft);
  border-color: var(--accent-line);
}

body:not(.is-welcome) .mobile-nav button[aria-current="page"],
body:not(.is-welcome) .journey-session-steps li.is-current,
body:not(.is-welcome) .journey-duration.is-current,
body:not(.is-welcome) .journey-calendar .has-activity,
body:not(.is-welcome) .skill-symbol,
body:not(.is-welcome) .tile-symbol,
body:not(.is-welcome) .start-icon {
  color: var(--primary);
}

body:not(.is-welcome) .level-badge,
body:not(.is-welcome) .method-strip strong {
  color: var(--deep);
}

body:not(.is-welcome) .focus-card {
  background: linear-gradient(118deg, #142b49, #285a98);
  border-color: #365f91;
}

body:not(.is-welcome) .focus-top,
body:not(.is-welcome) .focus-meter {
  color: #d9e9ff;
}

body:not(.is-welcome) .focus-card p {
  color: #e4efff;
}

body:not(.is-welcome) .focus-card .button-light {
  background: #eaf2ff;
  border-color: #eaf2ff;
  color: #17365f;
}

body:not(.is-welcome) .focus-card .button-light:hover {
  background: #d6e6ff;
  border-color: #d6e6ff;
  color: #17365f;
}

body:not(.is-welcome) .subject-card::before {
  background-color: var(--primary);
}

body:not(.is-welcome) .progress-track,
body:not(.is-welcome) .subject-progress-track,
body:not(.is-welcome) .exam-total-progress::before {
  background-color: var(--accent-soft);
}

body:not(.is-welcome) .progress-track span,
body:not(.is-welcome) .subject-progress-track > span,
body:not(.is-welcome) .result-bar span {
  background-color: var(--primary);
}

body:not(.is-welcome) input,
body:not(.is-welcome) select,
body:not(.is-welcome) textarea,
body:not(.is-welcome) progress {
  accent-color: var(--primary);
}

body:not(.is-welcome) :focus-visible {
  outline-color: var(--ring);
}

body:not(.is-welcome) .cloud-message {
  border-inline-start-color: var(--primary);
}

body:not(.is-welcome) .exam-tools .icon-button[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--primary);
}