:root {
    color-scheme: light dark;
    --background: #f7f7f7;
    --surface: #ffffff;
    --text: #1f1f1f;
    --muted: #5f5f5f;
    --brand: var(--ron-primary-light, #762b43);
    --secondary: var(--ron-secondary-light, #5f1525);
    --border: #dad3d5;
    font: 100%/1.7 system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--text); }
header, main, footer { max-width: 54rem; margin: 0 auto; padding: 1.5rem; }
header span { display: block; margin-top: 0.75rem; color: var(--muted); }
article { padding: clamp(1rem, 4vw, 2.5rem); background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; overflow-wrap: anywhere; }
h1, h2 { line-height: 1.3; color: var(--brand); }
h1 { margin-top: 0; font-size: clamp(1.65rem, 5vw, 2.25rem); color: var(--secondary); }
h2 { margin-top: 2rem; font-size: 1.25rem; }
article > :last-child { margin-bottom: 0; }
a { color: var(--brand); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 0.15em; }
a:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
li + li { margin-top: 0.75rem; }
ul { padding-left: 1.5rem; }
code { font-size: 0.9em; }
footer { padding-bottom: 2.5rem; }

:root[data-theme="dark"] {
    color-scheme: dark;
    --background: #14161a;
    --surface: #1d2024;
    --text: #e8eaed;
    --muted: #9aa1a9;
    --brand: var(--ron-primary-dark, #d98aa1);
    --secondary: var(--ron-secondary-dark, #e9b9c6);
    --border: #30353b;
}

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

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --background: #14161a;
        --surface: #1d2024;
        --text: #e8eaed;
        --muted: #9aa1a9;
        --brand: var(--ron-primary-dark, #d98aa1);
        --secondary: var(--ron-secondary-dark, #e9b9c6);
        --border: #30353b;
    }
}

@media print {
    :root, :root[data-theme] { color-scheme: light; --surface: #fff; --text: #000; --muted: #000; --brand: #000; --secondary: #000; }
    body { background: #fff; }
    header, footer { display: none; }
    main { max-width: none; padding: 0; }
    article { padding: 0; border: 0; }
    h2 { break-after: avoid; }
}