/* Third design, "paper": the calm one. A plain warm white page with nothing behind
   it, white cards with one thin ink line, the marker font of the sketches for
   headings only, small pastel touches and orange for the main action. Scoped to
   html[data-design="paper"]. The Patrick Hand font face is declared in
   design-sketch.css, which is always loaded. */

:root[data-design="paper"] {
  --bg: #faf8f4;
  --paper: #ffffff;
  --ink: #1f1d1a;
  --muted: #6b665e;
  --faint: #aaa49a;
  --edge: #2a2724;
  --line: rgba(31, 29, 26, 0.14);
  --glass: var(--paper);
  --glass-strong: var(--paper);
  --glass-border: var(--edge);
  --pill: var(--ink);
  --on-pill: var(--paper);
  --you: #ffa866;
  --accent: #ee7a2c;
  --accent-light: #ffb27a;
  --accent-soft: #fff0e4;
  --good: #23824a;
  --good-soft: #e3f4ea;
  --bad: #c43d3d;
  --bad-soft: #fde8ea;
  --soft-sun: #fff2c7;
  --soft-mint: #dcf3ea;
  --soft-sky: #e2efff;
  --soft-lilac: #ece9ff;
  --soft-peach: #ffe6d4;
  --soft-pink: #ffe4ec;
  --shadow: none;
  --serif: "Patrick Hand", "Comic Neue", "Chalkboard SE", "Segoe Print", cursive;
  background: var(--bg);
}

@media (prefers-color-scheme: dark) {
  :root[data-design="paper"] {
    --bg: #151513;
    --paper: #1f1f1c;
    --ink: #eeeae2;
    --muted: #b3ada2;
    --faint: #77726a;
    --edge: #d9d4ca;
    --line: rgba(238, 234, 226, 0.14);
    --good-soft: #17352a;
    --bad-soft: #3d1d22;
    --accent-soft: #3a2618;
    --soft-sun: #3a3220;
    --soft-mint: #1f3a31;
    --soft-sky: #1f3047;
    --soft-lilac: #2c2a47;
    --soft-peach: #3d2a1e;
    --soft-pink: #3d2530;
  }
}

/* Nothing behind the page */
:root[data-design="paper"] body::before {
  display: none;
}

/* Headings in the marker font, a touch larger because it runs small */
:root[data-design="paper"] .prompt,
:root[data-design="paper"] .sketch + .prompt {
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: 0;
}

/* Surfaces: white, one thin line, no blur, no shadow */
:root[data-design="paper"] .card,
:root[data-design="paper"] .option,
:root[data-design="paper"] .sketch,
:root[data-design="paper"] .feedback-inner {
  background: var(--paper);
  border: 1.5px solid var(--edge);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

:root[data-design="paper"] .sketch {
  background: #ffffff;
}

:root[data-design="paper"] .option {
  border-radius: 16px;
}

:root[data-design="paper"] .option:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

:root[data-design="paper"] .option.is-best {
  background: var(--good-soft);
  border-color: var(--good);
}

:root[data-design="paper"] .option.is-wrong {
  background: var(--bad-soft);
  border-color: var(--bad);
}

:root[data-design="paper"] .feedback-inner {
  border-width: 1.5px 1.5px 0;
}

:root[data-design="paper"] .feedback.is-good .feedback-inner {
  background: var(--good-soft);
}

:root[data-design="paper"] .feedback.is-bad .feedback-inner {
  background: var(--bad-soft);
}

/* Buttons: the main action in the player's orange, the rest outlined */
:root[data-design="paper"] .btn {
  border: 1.5px solid var(--edge);
}

:root[data-design="paper"] .btn-primary,
:root[data-design="paper"] .btn-duel {
  background: var(--you);
  color: #1f1d1a;
  box-shadow: none;
}

:root[data-design="paper"] .btn-secondary {
  background: var(--paper);
  color: var(--ink);
}

:root[data-design="paper"] .btn-ghost {
  border-color: transparent;
}

:root[data-design="paper"] .icon-btn,
:root[data-design="paper"] .streak,
:root[data-design="paper"] .tab,
:root[data-design="paper"] .chip {
  background: var(--paper);
  border: 1.5px solid var(--edge);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

:root[data-design="paper"] .tab.is-active {
  background: var(--soft-sun);
  color: var(--ink);
}

:root[data-design="paper"] .chip.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

:root[data-design="paper"] .fab {
  background: var(--you);
  color: #1f1d1a;
  border: 1.5px solid var(--edge);
  box-shadow: none;
}

/* Small parts: soft pastel with the same thin line */
:root[data-design="paper"] .icon-dot,
:root[data-design="paper"] .avatar {
  background: var(--soft-sky);
  color: var(--ink);
  border: 1.5px solid var(--edge);
  box-shadow: none;
}

:root[data-design="paper"] .icon-dot.tone-1,
:root[data-design="paper"] .avatar.tone-1 { background: var(--soft-peach); }
:root[data-design="paper"] .icon-dot.tone-2,
:root[data-design="paper"] .avatar.tone-2 { background: var(--soft-mint); }
:root[data-design="paper"] .icon-dot.tone-3,
:root[data-design="paper"] .avatar.tone-3 { background: var(--soft-lilac); }
:root[data-design="paper"] .avatar.tone-4 { background: var(--soft-pink); }

:root[data-design="paper"] .bar {
  height: 8px;
  background: var(--line);
}

:root[data-design="paper"] .bar-fill,
:root[data-design="paper"] .progress-fill {
  background: var(--accent);
}

:root[data-design="paper"] .progress {
  background: var(--line);
}

/* Lessons */
:root[data-design="paper"] .lesson {
  border: 1.5px solid var(--edge);
  background: var(--paper);
}

:root[data-design="paper"] .lesson.is-open {
  background: var(--you);
  color: #1f1d1a;
  box-shadow: none;
}

:root[data-design="paper"] .lesson.is-open .icon {
  color: #1f1d1a;
}

:root[data-design="paper"] .lesson.is-done {
  background: var(--soft-mint);
}

:root[data-design="paper"] .lesson.is-locked {
  border-color: var(--line);
  background: transparent;
}

:root[data-design="paper"] .unit.is-current,
:root[data-design="paper"] .duel-card.is-turn {
  border-color: var(--accent);
  border-width: 2px;
}

/* Progress arc: clean ink ticks, orange for what is done */
:root[data-design="paper"] .gauge .tick {
  stroke: var(--ink);
  opacity: 0.35;
}

:root[data-design="paper"] .gauge .tick.is-on {
  stroke: var(--accent);
  opacity: 1;
}

:root[data-design="paper"] .gauge-track {
  stroke: var(--line);
}

/* Challenge and help */
:root[data-design="paper"] .row input {
  border: 1.5px solid var(--edge);
  background: var(--paper);
}

:root[data-design="paper"] .note {
  background: var(--soft-peach);
}

@media (max-width: 360px) {
  :root[data-design="paper"] .prompt,
  :root[data-design="paper"] .sketch + .prompt {
    font-size: 22px;
  }

  :root[data-design="paper"] .top-date {
    font-size: 25px;
  }

  :root[data-design="paper"] .page-title,
  :root[data-design="paper"] .end .page-title,
  :root[data-design="paper"] .duel-screen .page-title {
    font-size: 32px;
  }
}

@media (max-height: 700px) {
  :root[data-design="paper"] .prompt,
  :root[data-design="paper"] .sketch + .prompt {
    font-size: 22px;
  }
}