/* Shared defaults cascade to all screens. A screen can override any value locally. */
:root {
  --tune-palette-primary: #343332;
  --tune-palette-secondary: #fffdfa;
  --tune-palette-background: #fffdfa;
  --tune-palette-surface: #ffffff;
  --tune-palette-text: #202321;
  --tune-background: var(--tune-palette-background);
  --tune-card-fill: var(--tune-palette-surface);
  --tune-card-outline: #cfc9bf;
  --tune-card-width: 1px;
  --tune-card-radius: 18px;
  --tune-button-fill: var(--tune-palette-primary);
  --tune-button-text: #ffffff;
  --tune-button-outline: var(--tune-palette-primary);
  --tune-button-width: 1px;
  --tune-button-radius: 12px;
  --tune-button-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tune-button-scale: 1;
  --tune-button-weight: 780;
  --tune-kicker-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tune-kicker-scale: 1;
  --tune-kicker-weight: 800;
  --tune-kicker-color: #6d6255;
  --tune-heading-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tune-heading-scale: 1;
  --tune-heading-weight: 700;
  --tune-heading-color: var(--tune-palette-text);
  --tune-field-fill: var(--tune-palette-surface);
  --tune-field-outline: #cfc9bf;
  --tune-field-width: 1.5px;
  --tune-field-radius: 12px;
}

.home-view {
  --tune-body-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tune-body-scale: 1;
  --tune-body-weight: 400;
  --tune-body-color: #50534e;
  --tune-option-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tune-option-scale: 1;
  --tune-option-weight: 720;
  --tune-option-color: var(--tune-palette-text);
  --tune-label-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tune-label-scale: 1;
  --tune-label-weight: 760;
  --tune-label-color: #50534e;
}

.setup-view {
  --tune-settings-fill: var(--tune-palette-background);
  --tune-choice-fill: var(--tune-palette-surface);
  --tune-choice-outline: #bfb8ad;
  --tune-choice-width: 1.5px;
  --tune-choice-radius: 14px;
  --tune-selected-fill: #f7f4ee;
  --tune-selected-outline: var(--tune-palette-primary);
  --tune-selected-text: var(--tune-palette-text);
  --tune-body-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tune-body-scale: 1;
  --tune-body-weight: 400;
  --tune-body-color: #50534e;
  --tune-label-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tune-label-scale: 1;
  --tune-label-weight: 760;
  --tune-label-color: var(--tune-palette-text);
  --tune-option-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tune-option-scale: 1;
  --tune-option-weight: 720;
  --tune-option-color: #50534e;
  --tune-entry-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tune-entry-scale: 1;
  --tune-entry-weight: 400;
  --tune-entry-color: var(--tune-palette-text);
}

.practice-view {
  --tune-operator-color: #000;
  --tune-question-font: "Helvetica Neue", Arial, Helvetica, sans-serif;
  --tune-question-scale: 1;
  --tune-question-weight: 400;
  --tune-question-color: #000;
  --tune-timer-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tune-timer-scale: 1;
  --tune-timer-weight: 820;
  --tune-timer-color: var(--tune-palette-text);
  --tune-caption-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tune-caption-scale: 1;
  --tune-caption-weight: 800;
  --tune-caption-color: #50534e;
  --tune-answer-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tune-answer-scale: 1;
  --tune-answer-weight: 700;
  --tune-answer-color: var(--tune-palette-text);
  --tune-feedback-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tune-feedback-scale: 1;
  --tune-feedback-weight: 720;
  --tune-feedback-color: #50534e;
  --tune-end-text: #50534e;
}

.results-view {
  --tune-stat-fill: var(--tune-palette-background);
  --tune-stat-outline: #cfc9bf;
  --tune-stat-width: 1px;
  --tune-stat-radius: 15px;
  --tune-secondary-text: var(--tune-palette-text);
  --tune-secondary-fill: var(--tune-palette-secondary);
  --tune-secondary-outline: #bfb8ad;
  --tune-secondary-width: 1.5px;
  --tune-value-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tune-value-scale: 1;
  --tune-value-weight: 850;
  --tune-value-color: var(--tune-palette-text);
  --tune-label-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tune-label-scale: 1;
  --tune-label-weight: 760;
  --tune-label-color: var(--tune-palette-text);
  --tune-detail-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tune-detail-scale: 1;
  --tune-detail-weight: 400;
  --tune-detail-color: #50534e;
}

html { background: var(--active-view-background, var(--tune-background)); color: var(--tune-palette-text); }
.brand { color: var(--tune-palette-text); }
.brand-mark { background: var(--tune-palette-primary); }
body { background: var(--active-view-background, var(--tune-background)); }

.home-view .area-card,
.setup-view .setup-card,
.practice-view .problem-card,
.results-view .results-card {
  border: var(--tune-card-width) solid var(--tune-card-outline);
  border-radius: var(--tune-card-radius);
  background: var(--tune-card-fill);
}

.equations-setup-view .equations-mode,
.equations-setup-view .equations-difficulty-options span,
.equations-practice-view .equations-operation-list span {
  border-color: var(--tune-choice-outline, var(--tune-card-outline));
  background: var(--tune-choice-fill, var(--tune-card-fill));
  color: var(--tune-option-color, var(--tune-palette-text));
}
.equations-setup-view .equations-mode-planned { border-style: dashed; background: var(--tune-settings-fill); }
.equations-setup-view .equations-mode:has(input:checked),
.equations-setup-view .equations-difficulty-options input:checked + span {
  border-color: var(--tune-selected-outline, var(--tune-palette-primary));
  background: var(--tune-selected-fill, var(--tune-palette-secondary));
  color: var(--tune-selected-text, var(--tune-palette-text));
  box-shadow: inset 0 0 0 1px var(--tune-selected-outline, var(--tune-palette-primary));
}
.equations-setup-view .equations-mode:hover,
.equations-setup-view .equations-difficulty-options label:hover span {
  border-color: #9e9588;
  background: var(--tune-selected-fill);
}
.equations-practice-view .problem.equations-problem,
.equations-practice-view .equations-history,
.equations-practice-view .equations-result-preview,
.equations-practice-view .equations-term-preview {
  color: #000;
  font-family: var(--tune-question-font);
  font-size: calc(clamp(1.6rem, 5vw, 3rem) * var(--tune-question-scale));
  font-weight: var(--tune-question-weight);
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: normal;
  font-synthesis: none;
}
.equations-practice-view .equation-operator,
.equations-practice-view .equation-equals { color: #000; }
.equations-practice-view .equation-target,
.equations-practice-view .equations-drag-chip { border-color: var(--tune-field-outline); background: var(--tune-field-fill); }
.equations-practice-view .equations-short-entry input,
.equations-practice-view .equations-distribution-product input,
.equations-practice-view .equations-result-form input {
  border: var(--tune-field-width) solid var(--tune-field-outline);
  border-radius: var(--tune-field-radius);
  background: var(--tune-field-fill);
  color: var(--tune-answer-color);
  font-family: var(--tune-answer-font);
  font-size: calc(1.15rem * var(--tune-answer-scale));
}
.equations-practice-view #equations-timer-value {
  color: var(--tune-timer-color);
  font-family: var(--tune-timer-font);
  font-size: calc(1.55rem * var(--tune-timer-scale));
  font-weight: var(--tune-timer-weight);
}

.home-view .area-card-planned { border-style: dashed; }

.view .primary-button {
  border: var(--tune-button-width) solid var(--tune-button-outline);
  border-radius: var(--tune-button-radius);
  background: var(--tune-button-fill);
  color: var(--tune-button-text);
}

.view .primary-button:hover {
  background: color-mix(in srgb, var(--tune-button-fill) 85%, black);
}

.view .primary-button,
.view .secondary-button,
.view .text-button {
  font-family: var(--tune-button-font);
  font-size: calc(1rem * var(--tune-button-scale));
  font-weight: var(--tune-button-weight);
  border-radius: var(--tune-button-radius);
}

.view .eyebrow {
  font-family: var(--tune-kicker-font);
  font-size: calc(0.84rem * var(--tune-kicker-scale));
  font-weight: var(--tune-kicker-weight);
  color: var(--tune-kicker-color);
}

.view h1 {
  font-family: var(--tune-heading-font);
  font-size: calc(clamp(2rem, 4vw, 3.35rem) * var(--tune-heading-scale));
  font-weight: var(--tune-heading-weight);
  color: var(--tune-heading-color);
}

.setup-view .settings-intro .practice-path {
  font-size: calc(0.84rem * var(--tune-kicker-scale) * var(--settings-fit, 1));
}

.setup-view .settings-intro h1 {
  font-size: calc(clamp(1.7rem, 2.65vw, 2.7rem) * var(--tune-heading-scale) * var(--settings-fit, 1));
  line-height: 1.12;
}

.setup-view .intro-copy {
  font-family: var(--tune-body-font);
  font-size: calc(1rem * var(--tune-body-scale));
  font-weight: var(--tune-body-weight);
  color: var(--tune-body-color);
}

.home-view .area-description {
  font-family: var(--tune-body-font);
  font-size: calc(1rem * var(--tune-body-scale));
  font-weight: var(--tune-body-weight);
  color: var(--tune-body-color);
}

.home-view .area-card h2 {
  font-family: var(--tune-option-font);
  font-size: calc(clamp(1.35rem, 2.3vw, 1.75rem) * var(--tune-option-scale));
  font-weight: var(--tune-option-weight);
  color: var(--tune-option-color);
}

.home-view .area-status {
  font-family: var(--tune-label-font);
  font-size: calc(0.875rem * var(--tune-label-scale));
  font-weight: var(--tune-label-weight);
  color: var(--tune-label-color);
}

.setup-view .form-section legend,
.setup-view .field span,
.setup-view .option-section legend,
.setup-view .operation-options h2 {
  font-family: var(--tune-label-font);
  font-weight: var(--tune-label-weight);
  color: var(--tune-label-color);
}

.setup-view .form-section legend,
.setup-view .field span { font-size: calc(0.93rem * var(--tune-label-scale)); }
.setup-view .option-section legend { font-size: calc(0.95rem * var(--tune-label-scale)); }
.setup-view .operation-options h2 { font-size: calc(1.05rem * var(--tune-label-scale)); }

.setup-view .choice-card,
.setup-view .segmented-control span {
  border: var(--tune-choice-width) solid var(--tune-choice-outline);
  background: var(--tune-choice-fill);
  font-family: var(--tune-option-font);
  font-weight: var(--tune-option-weight);
  color: var(--tune-option-color);
}

.setup-view .choice-card {
  border-radius: var(--tune-choice-radius);
  font-size: calc(0.82rem * var(--tune-option-scale));
}

.setup-view .segmented-control span {
  border-radius: var(--tune-choice-radius);
  font-size: calc(0.9rem * var(--tune-option-scale));
}

.setup-view .choice-card:hover,
.setup-view .segmented-control label:hover span {
  border-color: #9e9588;
  background: var(--tune-selected-fill);
}
.setup-view .choice-card:has(input:checked),
.setup-view .segmented-control input:checked + span {
  border-color: var(--tune-selected-outline);
  background: var(--tune-selected-fill);
  color: var(--tune-selected-text);
  box-shadow: inset 0 0 0 1px var(--tune-selected-outline);
}
.setup-view .choice-card:has(input:checked) .choice-symbol { color: var(--tune-selected-text); }

.setup-view .operation-options { background: var(--tune-settings-fill); }
.setup-view .field input,
#practice-view #answer {
  border: var(--tune-field-width) solid var(--tune-field-outline);
  border-radius: var(--tune-field-radius);
  background: var(--tune-field-fill);
}
.setup-view .field input {
  font-family: var(--tune-entry-font);
  font-size: calc(1rem * var(--tune-entry-scale));
  font-weight: var(--tune-entry-weight);
  color: var(--tune-entry-color);
}
.setup-view .field input:focus,
#practice-view #answer:focus { border-color: #6d6255; }

#practice-view .problem {
  font-family: var(--tune-question-font);
  font-size: calc(clamp(2rem, 8vw, 5.2rem) * var(--tune-question-scale));
  font-weight: var(--tune-question-weight);
  font-synthesis: weight;
  color: var(--tune-question-color);
}

#practice-view .problem.fill-in-blank-problem {
  font-size: calc(clamp(1.8rem, 7vw, 4.7rem) * var(--tune-question-scale));
}

#practice-view .problem.rational-fraction-problem {
  font-size: calc(clamp(1.65rem, 5vw, 3.7rem) * var(--tune-question-scale));
}

#practice-view .problem.rational-decimal-problem {
  font-size: calc(clamp(1.8rem, 6vw, 4.5rem) * var(--tune-question-scale));
}

.practice-view .problem .operator { color: var(--tune-operator-color); }
.practice-view .blank-addend { background: var(--tune-field-fill); }
.practice-view #timer-value {
  font-family: var(--tune-timer-font);
  font-size: calc(1.55rem * var(--tune-timer-scale));
  font-weight: var(--tune-timer-weight);
  color: var(--tune-timer-color);
}
.practice-view .timer-label {
  font-family: var(--tune-caption-font);
  font-size: calc(0.76rem * var(--tune-caption-scale));
  font-weight: var(--tune-caption-weight);
  color: var(--tune-caption-color);
}

#practice-view #answer {
  font-family: var(--tune-answer-font);
  font-size: calc(0.62em * var(--tune-answer-scale));
  font-weight: var(--tune-answer-weight);
  color: var(--tune-answer-color);
}

.practice-view .feedback {
  font-family: var(--tune-feedback-font);
  font-size: calc(1rem * var(--tune-feedback-scale));
  font-weight: var(--tune-feedback-weight);
  color: var(--tune-feedback-color);
}
.practice-view .feedback.correct { color: var(--green); }
.practice-view .feedback.incorrect { color: var(--red); }
.practice-view .text-button { color: var(--tune-end-text); }
.equations-practice-view { --tune-end-scale: 1; --tune-kicker-scale: 1.2; }
.equations-practice-view #equations-end {
  font-size: calc(1rem * var(--tune-button-scale) * var(--tune-end-scale));
}
.practice-view .problem-card.correct-flash {
  border-color: #8fc8b5;
  background: var(--green-soft);
}

.results-view .results-card h1 {
  font-size: calc(clamp(2.2rem, 6vw, 3.4rem) * var(--tune-heading-scale));
}
.results-view .result-stat {
  border: var(--tune-stat-width) solid var(--tune-stat-outline);
  border-radius: var(--tune-stat-radius);
  background: var(--tune-stat-fill);
}
.results-view .secondary-button {
  border: var(--tune-secondary-width) solid var(--tune-secondary-outline);
  background: var(--tune-secondary-fill);
  color: var(--tune-secondary-text);
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.results-view .secondary-button:hover {
  border-color: color-mix(in srgb, var(--tune-secondary-outline) 60%, var(--tune-palette-primary));
  background: color-mix(in srgb, var(--tune-secondary-fill) 65%, #e0d6c9);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(52, 51, 50, 0.12);
}
.results-view .secondary-button:active { transform: translateY(0); box-shadow: none; }
.results-view .result-value {
  font-family: var(--tune-value-font);
  font-size: calc(clamp(2.5rem, 6vw, 4rem) * var(--tune-value-scale));
  font-weight: var(--tune-value-weight);
  color: var(--tune-value-color);
}
.results-view .result-label {
  font-family: var(--tune-label-font);
  font-size: calc(0.95rem * var(--tune-label-scale));
  font-weight: var(--tune-label-weight);
  color: var(--tune-label-color);
}
.results-view .result-detail {
  font-family: var(--tune-detail-font);
  font-size: calc(0.82rem * var(--tune-detail-scale));
  font-weight: var(--tune-detail-weight);
  color: var(--tune-detail-color);
}