/* Variant 1 — "Бумага" (paper).
   A warm paper ground, a cream surface, one ink-blue accent. Literata carries
   titles and card fronts; Onest carries everything else.

   The skeleton in main.css already draws this variant's shapes; what is
   its own is the side panel's way between levels, at the end. */
:root[data-variant="paper"] {
  --bg: #f4f1ea;
  --panel: #f4f1ea;
  --surface: #fffdf8;
  --line: #e2dccf;
  --line-soft: #ede7da;
  --ink: #1d1a15;
  --ink-soft: #3d372d;
  --muted: #6a6356;
  --placeholder: #8a8272;

  --accent: #2b4ba0;
  --accent-hover: #1c3578;
  --accent-soft: #e3e8f5;
  --accent-ink: #1c3578;
  --on-accent: #ffffff;

  --chip: #ede7da;
  --chip-ink: #4a4336;
  --dash: #b9b09d;

  --row-edit: #f2f4fb;
  --seg-on: #fffdf8;
  --seg-shadow: 0 1px 3px rgba(29, 26, 21, 0.12);
  --menu-shadow: 0 12px 32px rgba(29, 26, 21, 0.12);

  --danger: #a3321f;
  --ok: #2f7a4f;
  --pending: #9a9282;

  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --border-w: 1px;
  --shadow-btn: none;
  --shadow-card: none;

  --font-display: Literata, "Noto Sans Armenian", Georgia, serif;
  --font-body: Onest, "Noto Sans Armenian", system-ui, -apple-system, "Segoe UI", sans-serif;
  --h1-size: clamp(30px, 4vw, 44px);
  --h1-weight: 600;
  --h1-spacing: -0.01em;
  --label-spacing: 0.06em;
  --label-transform: uppercase;

  --art-bg: #2b4ba0;
  --art-ink: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root[data-variant="paper"]:not([data-theme="light"]) {
    --bg: #141318;
    --panel: #141318;
    --surface: #1d1c22;
    --line: #2f2d36;
    --line-soft: #28262e;
    --ink: #eeeae1;
    --ink-soft: #cfc9bd;
    --muted: #a39d91;
    --placeholder: #7c7688;

    --accent: #93a9f2;
    --accent-hover: #b6c5f8;
    --accent-soft: #262d47;
    --accent-ink: #b6c5f8;
    --on-accent: #11162a;

    --chip: #28262e;
    --chip-ink: #d8d2c5;
    --dash: #57525e;

    --row-edit: #212640;
    --seg-on: #3a3843;
    --seg-shadow: none;
    --menu-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);

    --danger: #f0907a;
    --ok: #5fbe86;
    --pending: #7c7688;
  }
}

:root[data-variant="paper"][data-theme="dark"] {
  --bg: #141318;
  --panel: #141318;
  --surface: #1d1c22;
  --line: #2f2d36;
  --line-soft: #28262e;
  --ink: #eeeae1;
  --ink-soft: #cfc9bd;
  --muted: #a39d91;
  --placeholder: #7c7688;

  --accent: #93a9f2;
  --accent-hover: #b6c5f8;
  --accent-soft: #262d47;
  --accent-ink: #b6c5f8;
  --on-accent: #11162a;

  --chip: #28262e;
  --chip-ink: #d8d2c5;
  --dash: #57525e;

  --row-edit: #212640;
  --seg-on: #3a3843;
  --seg-shadow: none;
  --menu-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);

  --danger: #f0907a;
  --ok: #5fbe86;
  --pending: #7c7688;
}

/* --- one level at a time ------------------------------------------------ */

/* On a deck's page the panel lists the topic's decks, and its head has an
   arrow up to the topics. Following it swaps the panel's list, not the
   page. */
:root[data-variant="paper"] .level-decks button.side-back {
  display: inline-flex;
  margin-left: -6px;
}

:root[data-variant="paper"] .side-rail.browsing > .pane-topics {
  display: flex;
}

:root[data-variant="paper"] .side-rail.browsing > .level-decks {
  display: none;
}

/* Browsing up, the topic at hand offers its decks back, in place of its
   count. */
:root[data-variant="paper"] .side-rail.browsing .side-item.active > button.side-expand {
  display: inline-flex;
}

:root[data-variant="paper"] .side-rail.browsing .side-item.active > .side-link .side-count {
  visibility: hidden;
}