:root {
  --p-paper: #f4f7f6;
  --p-white: #ffffff;
  --p-mist: #eaf1ee;
  --p-ink: #172d27;
  --p-slate: #425d53;
  --p-muted: #52675f;
  --p-emerald: #126447;
  --p-emerald-deep: #0d5038;
  --p-mint: #dceee4;
  --p-line: #c5d4cc;
  --p-control: #6f857a;
  --p-forest: #022c22;
  --p-frost: #edf7f2;
  --p-mint-link: #a7f3d0;
  --p-sage: #b2cfc0;
  --p-red: #a42630;
  --p-amber: #785006;
  --p-night: #101e19;
  --p-night-surface: #172a22;
  --p-night-raised: #21392e;
  --p-night-text: #edf5ef;
  --p-night-dim: #c4d5ca;
  --p-night-mute: #abc0b1;
  --p-night-brand: #85dfb2;
  --p-night-hover: #a2edc8;
  --p-night-on-brand: #10261b;
  --p-night-tint: #214434;
  --p-night-line: #496455;
  --p-night-control: #829c8b;
  --p-night-footer: #08251b;
  --p-night-error: #ffb6bd;
  --p-night-warning: #eac36f;
  --bg: var(--p-paper);
  --surface: var(--p-white);
  --surface-alt: var(--p-mist);
  --text: var(--p-ink);
  --text-dim: var(--p-slate);
  --text-mute: var(--p-muted);
  --brand: var(--p-emerald);
  --brand-hover: var(--p-emerald-deep);
  --on-brand: var(--p-white);
  --brand-soft: var(--p-mint);
  --border: var(--p-line);
  --control-border: var(--p-control);
  --footer-bg: var(--p-forest);
  --footer-text: var(--p-frost);
  --footer-link: var(--p-mint-link);
  --footer-muted: var(--p-sage);
  --danger: var(--p-red);
  --warning: var(--p-amber);
  --identity-light: var(--p-white);
  --identity-dark: var(--p-forest);
  --font-display: "Onest", Arial, sans-serif;
  --font-body: "Manrope", Arial, sans-serif;
  --t-body: 1.0625rem;
  --t-small: .875rem;
  --t-conditions: 1rem;
  --t-h1: clamp(1.875rem, 1.4rem + 2vw, 3rem);
  --t-h2: clamp(1.5rem, 1.15rem + 1vw, 2rem);
  --t-h3: 1.25rem;
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 5rem;
  --r-control: .5rem;
  --r-panel: .75rem;
  --r-author: 1.5rem;
  --r-circle: 9999px;
  --container-max: 75rem;
  --gutter: 1rem;
  --tap: 2.75rem;
  --shadow-popover: 0 1rem 2.5rem rgb(13 45 30 / .2);
  --overlay-bg: rgb(3 16 10 / .92);
  --overlay-text: var(--p-frost);
  --overlay-button: var(--p-night-raised);
  --dur-feedback: 120ms;
  --dur-dialog: 180ms;
  --dur-lightbox: 220ms;
  --ease: cubic-bezier(.2,.7,.2,1);
  color-scheme: light;
}
html[data-mode="dark"] {
  --bg: var(--p-night);
  --surface: var(--p-night-surface);
  --surface-alt: var(--p-night-raised);
  --text: var(--p-night-text);
  --text-dim: var(--p-night-dim);
  --text-mute: var(--p-night-mute);
  --brand: var(--p-night-brand);
  --brand-hover: var(--p-night-hover);
  --on-brand: var(--p-night-on-brand);
  --brand-soft: var(--p-night-tint);
  --border: var(--p-night-line);
  --control-border: var(--p-night-control);
  --footer-bg: var(--p-night-footer);
  --footer-text: var(--p-frost);
  --footer-link: var(--p-mint-link);
  --footer-muted: var(--p-sage);
  --danger: var(--p-night-error);
  --warning: var(--p-night-warning);
  color-scheme: dark;
}
.cl-library, .cl-choice {
  --cl-font: var(--font-body);
  --cl-display: var(--font-display);
  --cl-ink: var(--text);
  --cl-muted: var(--text-mute);
  --cl-surface: var(--surface);
  --cl-soft: var(--surface-alt);
  --cl-line: var(--border);
  --cl-accent: var(--brand);
  --cl-accent-text: var(--on-brand);
  --cl-tint: var(--brand-soft);
  --cl-good: var(--brand);
  --cl-radius: var(--r-panel);
  --cl-shadow: none;
}

:root {
  --p-print-black: #000000;
  --editorial-contrast-bg: var(--p-forest);
  --editorial-contrast-surface: var(--p-night-surface);
  --editorial-contrast-surface-alt: var(--p-night-raised);
  --editorial-contrast-text: var(--p-frost);
  --editorial-contrast-text-dim: var(--p-night-dim);
  --editorial-contrast-text-mute: var(--p-night-mute);
  --editorial-contrast-accent: var(--p-mint-link);
  --editorial-contrast-accent-hover: var(--p-white);
  --editorial-contrast-on-accent: var(--p-night-on-brand);
  --editorial-contrast-accent-soft: var(--p-night-tint);
  --editorial-contrast-border: var(--p-night-line);
  --source-paper: var(--p-white);
  --source-paper-link: var(--p-emerald);
  --illustration-mat: var(--p-mist);
  --print-paper: var(--p-white);
  --print-ink: var(--p-print-black);
}

:root {
  --backtop-control-size: 44px;
  --backtop-icon-size: 24px;
  --backtop-edge: 4px;
  --backtop-content-gap: 4px;
  --backtop-focus-offset: 2px;
  --backtop-author-inset: 20px;
}
@media(min-width:768px) {
  :root { --backtop-control-size: 48px; --backtop-author-inset: 28px; }
}

:root { --backtop-card-min-inset: 16px; }