/* ============================================================
   theme-4 — "sistema"
   Swiss modernist chrome: cool paper, baseline rhythm, hairline
   structure, tabular capsule. Vitsœ/Braun warmth, not chill.
   Activate: document.body.dataset.theme = 'sistema'
   ============================================================ */

body[data-theme="sistema"] {
  --sys-paper: #f7f7f5;
  --sys-ink: #16181a;
  --sys-hairline: rgba(22, 24, 26, 0.16);
  --sys-hairline-strong: rgba(22, 24, 26, 0.32);
  background: var(--sys-paper);
  color: var(--sys-ink);
}

/* ---- card ground: cool paper, decisive fades ---- */
body[data-theme="sistema"] .card {
  background: var(--sys-paper);
  transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
}
body[data-theme="sistema"] .card.on {
  transition: opacity 0.2s ease-out;
}

/* paper grain overlay. Non-interactive, near-subliminal, and clipped
   BELOW the header-band zone (bands are 22cqh tall) so it never runs
   over saturated color. Two offset repeat frequencies break up any
   full-width banding into an irregular fiber, and it fades out before
   the foot so the bottom margin stays clean. (The former left-margin
   hairline was removed: it was content-blind — floating beside empty
   columns and colliding with the outline capsule.) */
body[data-theme="sistema"] .card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg,
      rgba(20, 22, 26, 0.015) 0 1px,
      transparent 1px 3px),
    repeating-linear-gradient(0deg,
      transparent 0 2px,
      rgba(20, 22, 26, 0.012) 2px 3px,
      transparent 3px 7px);
  background-repeat: repeat;
  background-position: 0 23cqh, 0 23.4cqh;
  background-size: 100% 71cqh, 100% 70cqh;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0 23cqh, #000 25cqh, #000 88cqh, transparent 93cqh);
  mask-image: linear-gradient(to bottom,
    transparent 0 23cqh, #000 25cqh, #000 88cqh, transparent 93cqh);
}

/* fully-colored cover / section cards (blue cover c02, sky c03,
   blue c04, teal ELEMENTOS c05, red c14, pink FORMAÇÕES c24):
   a fixed-ink hairline and paper grain have no business over
   saturated ground — suppress the overlay entirely. */
body[data-theme="sistema"] .card:has(.c02)::after,
body[data-theme="sistema"] .card:has(.c03)::after,
body[data-theme="sistema"] .card:has(.c04)::after,
body[data-theme="sistema"] .card:has(.c05)::after,
body[data-theme="sistema"] .card:has(.c14)::after,
body[data-theme="sistema"] .card:has(.c24)::after {
  content: none;
}

/* ---- body text: strict rhythm, medium weight, tempered ink ---- */
body[data-theme="sistema"] .card-inner p {
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.008em;
}
body[data-theme="sistema"] .card-inner li {
  line-height: 1.6;
  letter-spacing: 0.008em;
}
body[data-theme="sistema"] .card-inner h1,
body[data-theme="sistema"] .card-inner h2,
body[data-theme="sistema"] .card-inner h3 {
  letter-spacing: 0.01em;
}
/* small-caps metadata accents: footers, version marks, captions */
body[data-theme="sistema"] .card-inner .c02-footer,
body[data-theme="sistema"] .card-inner .c02-version,
body[data-theme="sistema"] .card-inner small,
body[data-theme="sistema"] .card-inner figcaption {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
  font-feature-settings: "tnum" 1;
}

/* ---- outline capsule: precise rounded-rect, tabular feel ---- */
body[data-theme="sistema"] #outline {
  border-radius: 10px;
  background: rgba(250, 250, 249, 0.82);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--sys-hairline-strong);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 8px 24px -12px rgba(22, 24, 26, 0.28);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, sans-serif;
  font-feature-settings: "tnum" 1;
  font-size: 0.72rem;
  line-height: 2.05;
  letter-spacing: 0.015em;
  padding: 0.4rem 1rem;
}
body[data-theme="sistema"] #outline .list {
  transition: transform 0.2s cubic-bezier(0.3, 0.7, 0.2, 1);
}
body[data-theme="sistema"] #outline .sec {
  font-variant-caps: all-small-caps;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  opacity: 0.5;
  color: var(--sys-ink);
}
body[data-theme="sistema"] #outline a {
  color: var(--sys-ink);
  opacity: 0.4;
  padding-left: 1em;
  transition: opacity 0.2s ease-out;
}
body[data-theme="sistema"] #outline a:hover { opacity: 0.9; }
body[data-theme="sistema"] #outline a.here {
  opacity: 1;
  font-weight: 600;
}

/* ---- mute: quiet instrument control ---- */
/* shares the capsule's surface so it stays legible on the
   saturated cover / section grounds */
body[data-theme="sistema"] #mute, body[data-theme="sistema"] #vmute {
  color: var(--sys-ink);
  opacity: 0.6;
  border-radius: 8px;
  background: rgba(250, 250, 249, 0.82);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--sys-hairline);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 8px 24px -12px rgba(22, 24, 26, 0.28);
  transition: opacity 0.2s ease-out, border-color 0.2s ease-out;
}
body[data-theme="sistema"] #mute:hover, body[data-theme="sistema"] #vmute:hover {
  opacity: 1;
  border-color: var(--sys-hairline-strong);
}