:root {
  color-scheme: light dark;
  --dark: 0;

  --color-paper: light-dark(#fbf9f5, #14150f);
  --color-surface-low: light-dark(#f5f3ef, #1c1e18);
  --color-surface-high: light-dark(#eae8e4, #2a2d26);
  --color-surface-lowest: light-dark(#ffffff, #212319);
  --color-border: light-dark(#d4d8d0, #363a31);
  --color-ink: light-dark(#1b1c1a, #e6e5df);
  --color-ink-soft: light-dark(#434840, #b3b8ac);
  --color-ink-faint: light-dark(#8b9086, #7e857a);
  --color-ink-wash: light-dark(rgba(27, 28, 26, 0.1), rgba(230, 229, 223, 0.12));
  --color-on-accent: light-dark(#ffffff, #14180f);
  --color-primary: light-dark(#4c6546, #9cbf90);
  --color-primary-hover: light-dark(#3b5334, #b0cfa4);
  --color-primary-light: light-dark(#89a481, #6f8f66);
  --color-primary-container: light-dark(#c6dabc, #35472f);
  --color-primary-wash: light-dark(#edf1e8, #1f2a1b);
  --color-secondary: light-dark(#576153, #a8b3a2);
  --color-secondary-container: light-dark(#dbe6d3, #2e3b29);
  --color-secondary-hover: light-dark(#e6e8e0, #333730);
  --color-sage: light-dark(#6ab47b, #7fc48d);
  --color-tertiary: light-dark(#7c5262, #d3a6b6);
  --color-tertiary-container: light-dark(#f2e2e7, #3a2b31);
  --color-danger: light-dark(#a13d3d, #e08b8b);
  --color-danger-hover: light-dark(#8a3333, #ea9d9d);
  --color-danger-container: light-dark(#f3dede, #3a2020);
  --color-warn: light-dark(#d48a2e, #e0a050);
  --color-warn-ink: light-dark(#a06820, #eab97a);
  --color-warn-container: light-dark(#fef6ec, #2a1f0e);
  --color-info-container: light-dark(#e0ecf0, #23343a);
  --color-info-ink: light-dark(#3a6575, #a8cddb);
  --color-hairline-sage: light-dark(rgba(137, 164, 129, 0.18), rgba(156, 191, 144, 0.22));
  --color-dot: light-dark(rgba(27, 28, 26, 0.13), rgba(230, 229, 223, 0.1));
  --color-dot-strong: light-dark(rgba(27, 28, 26, 0.38), rgba(230, 229, 223, 0.3));
  --color-dot-faint: light-dark(rgba(27, 28, 26, 0.05), rgba(230, 229, 223, 0.05));
  --color-scrim-modal: light-dark(rgba(27, 28, 26, 0.35), rgba(0, 0, 0, 0.6));
  --color-scrim-nav: light-dark(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.7));
  --line: light-dark(rgba(27, 28, 26, 0.08), rgba(230, 229, 223, 0.1));
  --color-deco-pink: light-dark(var(--color-tertiary-container), var(--color-tertiary));
  --color-deco-green: light-dark(var(--color-secondary-container), var(--color-primary-light));
  --color-node-mastered: light-dark(#4c6546, #557a4b);
  --color-node-learning: light-dark(#89a481, #3d5636);
  --color-node-new: light-dark(#dbe6d3, #26301f);
  --color-node-field-new: light-dark(#c6dab8, #2f3f28);
  --color-node-label: light-dark(#ffffff, #f0f3ec);

  --shadow-offset: 0.25rem 0.25rem 0 var(--color-secondary-container);
  --shadow-lift: 0 1.125rem 2.5rem -1.375rem light-dark(rgba(27, 28, 26, 0.22), rgba(0, 0, 0, 0.7));
  --shadow-lift-sm: 0 0.625rem 1.5rem -1.125rem light-dark(rgba(27, 28, 26, 0.18), rgba(0, 0, 0, 0.6));
  --shadow-menu: 0 0.25rem 1rem -0.5rem light-dark(rgba(27, 28, 26, 0.12), transparent),
    0 1.5rem 3.5rem -1rem light-dark(rgba(27, 28, 26, 0.2), rgba(0, 0, 0, 0.7));
  --shadow-pop: 0 0.5rem 2.5rem light-dark(rgba(27, 28, 26, 0.2), rgba(0, 0, 0, 0.6));
  --shadow-toast: 0 0.75rem 2.5rem light-dark(rgba(27, 28, 26, 0.2), rgba(0, 0, 0, 0.6));
  --shadow-tip: 0 0.375rem 1.5rem light-dark(rgba(27, 28, 26, 0.15), rgba(0, 0, 0, 0.5));
  --shadow-pill: 0 0.0625rem 0.25rem light-dark(rgba(27, 28, 26, 0.1), rgba(0, 0, 0, 0.4));
  --shadow-tail-lift: 0 -0.6rem 1.1rem -0.85rem light-dark(rgba(27, 28, 26, 0.3), rgba(0, 0, 0, 0.65));
  --shadow-raised: 0 1px 2px light-dark(rgba(27, 28, 26, 0.16), rgba(0, 0, 0, 0.5)),
    0 2px 6px 2px light-dark(rgba(27, 28, 26, 0.09), rgba(0, 0, 0, 0.35));
  --shadow-halo: 0 0 6rem 0.5rem light-dark(rgba(27, 28, 26, 0.16), rgba(0, 0, 0, 0.6));
  --shadow-tail-fade: 0 -1.25rem 3rem -1.5rem light-dark(rgba(27, 28, 26, 0.22), rgba(0, 0, 0, 0.7));
  --shadow-fab: 0 1px 3px light-dark(rgba(27, 28, 26, 0.16), rgba(0, 0, 0, 0.5)),
    0 4px 8px 3px light-dark(rgba(27, 28, 26, 0.11), rgba(0, 0, 0, 0.38));

  /* At --dark: 1 these read 1px solid and brightness(0.85) saturate(0.95);
     at 0 each is a no-op. */
  --card-edge: calc(1px * var(--dark)) solid var(--color-border);
  --thumb-filter: brightness(calc(1 - 0.15 * var(--dark))) saturate(calc(1 - 0.05 * var(--dark)));

  --radius-sm: 0.5rem;
  --radius-tab: 0.75rem;
  --radius-md: 1.5rem;
  --radius-lg: 2rem;
  --radius-xl: 3rem;
  --radius-fab: 1rem;
  --radius-full: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --dark: 1;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --dark: 0;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --dark: 1;
}