:root[data-theme="mavert"] {
  color-scheme: light;
  /* the logo's three colours */
  --mv-green: oklch(55.4% 0.151 150.3);
  --mv-green-deep: oklch(49% 0.135 150.3);
  --mv-green-press: oklch(44% 0.12 150.3);
  --mv-lime: oklch(70.3% 0.169 135.8);
  --mv-teal: oklch(37% 0.048 180.9);
  --mv-teal-deep: oklch(29% 0.042 181);
  --mv-teal-night: oklch(25% 0.036 181);

  --color-paper: oklch(98.4% 0.005 160);
  --color-paper-2: oklch(95.6% 0.013 155);
  --color-paper-3: oklch(92.4% 0.024 152);
  --color-ink: var(--mv-teal);
  --color-ink-2: oklch(41% 0.04 180);
  --color-muted: oklch(49% 0.035 176);
  --color-rule: oklch(37% 0.048 180.9 / 0.8);
  --color-rule-2: oklch(37% 0.048 180.9 / 0.2);
  --color-grid: oklch(37% 0.048 180.9 / 0.06);
  --color-grid-2: oklch(37% 0.048 180.9 / 0.14);
  --color-accent: var(--mv-green-deep);
  --color-accent-ink: oklch(98.6% 0.006 150);
  --color-focus: var(--mv-green-deep);
  --color-signal: var(--mv-lime);

  /* the dark bands: teal ground, light ink */
  --mv-on-dark: oklch(97.5% 0.01 160);
  --mv-on-dark-2: oklch(89% 0.022 165);
  --mv-on-dark-muted: oklch(80% 0.03 168);
  --mv-on-dark-rule: oklch(96% 0.02 160 / 0.7);
  --mv-on-dark-rule-2: oklch(96% 0.02 160 / 0.22);
}

/* ---------- controls ---------- */
[data-theme="mavert"] .btn { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
[data-theme="mavert"] .btn:hover { background: var(--mv-green-press); border-color: var(--mv-green-press); }
[data-theme="mavert"] .btn--line { background: transparent; border-color: var(--color-ink); color: var(--color-ink); }
[data-theme="mavert"] .btn--line:hover { background: var(--color-paper-2); border-color: var(--color-ink); }

/* ---------- nav: white slab, the logo in colour, a lime heavy rule ---------- */
[data-theme="mavert"] .nav { background: var(--color-paper); border-bottom-color: var(--color-signal); }
[data-theme="mavert"] .nav .logo { background: url("./assets/mavert-color.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
[data-theme="mavert"] .nav a:not(.brand):hover { border-bottom-color: var(--mv-green); }

/* ---------- heavy rules take the light green ---------- */
[data-theme="mavert"] .register { border-top-color: var(--color-signal); }
[data-theme="mavert"] .table th { border-bottom-color: var(--color-signal); }
[data-theme="mavert"] .lines { border-top-color: var(--color-signal); }

/* ---------- the work register's selected row ---------- */
[data-theme="mavert"] .row[aria-pressed="true"] { background: var(--color-paper-3); box-shadow: inset 3px 0 0 var(--mv-green); }
[data-theme="mavert"] .row[aria-pressed="true"] .num { color: var(--mv-green-deep); }

/* ---------- photographs: teal duotone on the white sheet ---------- */
[data-theme="mavert"] [data-slot]:has(> img) { background: var(--color-paper); }
[data-theme="mavert"] [data-slot] > img { filter: grayscale(1) contrast(1.2) brightness(1.02); }
[data-theme="mavert"] [data-slot]:has(> img)::before { background: var(--mv-teal); }

/* ---------- dark bands: the figures and the footer on teal ---------- */
[data-theme="mavert"] .plant,
[data-theme="mavert"] .foot {
  --color-ink: var(--mv-on-dark); --color-ink-2: var(--mv-on-dark-2); --color-muted: var(--mv-on-dark-muted);
  --color-rule: var(--mv-on-dark-rule); --color-rule-2: var(--mv-on-dark-rule-2); --color-focus: var(--mv-lime);
  color: var(--color-ink);
}
[data-theme="mavert"] .plant { background: var(--mv-teal-deep); }
[data-theme="mavert"] .plant .stats dd { color: var(--mv-lime); }
[data-theme="mavert"] .foot { background: var(--mv-teal-night); border-top-color: var(--mv-lime); }
[data-theme="mavert"] .foot ::selection { color: var(--mv-teal-night); }