/* CSS custom properties for easy theming */
:root {
    /* Layout */
    --container-max-width: 800px;
    --container-padding: 16px;
    --page-padding: 20px;

    /* Colors */
    --color-page-bg: #fefefe;         /* html background */
    --color-body-bg: #ffffff;         /* content background */
    --color-text: #2c2620;
    --color-border: #d3cbbd;
    --color-muted: #766d61;
    --color-accent: #3a6ec3;
    --color-code-bg: rgba(32, 28, 24, 0.04);
    --color-code-border: rgba(32, 28, 24, 0.08);

    /* Typography */
    --font-family-base: "Inter", "Liberation Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: "Fira Code", "SFMono-Regular", Menlo, Consolas, monospace;
    --font-size-mono: 0.95rem;
    --font-size-base: 1.00rem;
    --line-height-base: 1.5;

    /* Effects */
    --shadow-1: 0 2px 8px rgba(0,0,0,0.05);
    --radius-1: 5px;
}

:root.theme-dark {
    --color-page-bg: #2b3039;
    --color-body-bg: #353b46;
    --color-text: #e8ecf3;
    --color-border: #474e5d;
    --color-muted: #aeb7c4;
    --color-accent: #92abf7;
    --shadow-1: 0 2px 10px rgba(0,0,0,0.26);
    --color-code-bg: rgba(238, 242, 255, 0.08);
    --color-code-border: rgba(238, 242, 255, 0.16);
}

:root.theme-light {
    --color-page-bg: #fafafa;         /* html background */
    --color-body-bg: #ffffff;         /* content background */
    --color-text: #2c2620;
    --color-border: #d3cbbd;
    --color-muted: #766d61;
    --color-accent: #3a6ec3;
    --shadow-1: 0 2px 8px rgba(0,0,0,0.05);
    --color-code-bg: rgba(32, 28, 24, 0.04);
    --color-code-border: rgba(32, 28, 24, 0.08);
}

/* Example: dark theme hook (optional)
@media (prefers-color-scheme: dark) {
    :root {
        --color-page-bg: #0f1115;
        --color-body-bg: #161a22;
        --color-text: #e6e6e6;
        --color-border: #2a2f3a;
        --color-muted: #9aa4b2;
        --color-accent: #4da3ff;
    }
}
*/