/* Base styles: tokens, reset, typography, links, and media defaults. */

:root {
    --color-bg: #fbf8f1;
    --color-bg-soft: #f4efe4;
    --color-surface: #fffdf8;
    --color-text: #28231d;
    --color-muted: #6f6a5f;
    --color-accent: #9a7a32;
    --color-accent-soft: #efe5cf;
    --color-line: #e7dcc9;
    --font-heading: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
    --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --radius-sm: 7px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;
    --shadow-soft: 0 10px 28px rgba(40, 35, 29, 0.04);
    --shadow-media: 0 18px 42px rgba(40, 35, 29, 0.08);
    --space-page-x: 40px;
    --width-content: 820px;
    --width-container: 1080px;
    --width-wide: 1160px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--color-bg);
    color: var(--color-text);
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.72;
}

body:not(.admin-area) {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.72;
    text-rendering: optimizeLegibility;
}

body:not(.admin-area) .content-narrow,
body:not(.admin-area) .text-page,
body:not(.admin-area) .article-detail {
    max-width: var(--width-content);
}

body:not(.admin-area) h1,
body:not(.admin-area) h2,
body:not(.admin-area) h3,
body:not(.admin-area) h4,
body:not(.admin-area) h5,
body:not(.admin-area) h6 {
    color: var(--color-text);
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

body:not(.admin-area) p {
    margin-top: 0;
    overflow-wrap: anywhere;
}

body:not(.admin-area) ul,
body:not(.admin-area) ol {
    padding-left: 1.25rem;
}

body:not(.admin-area) li + li {
    margin-top: 0.35em;
}

body:not(.admin-area) a {
    color: inherit;
}

body:not(.admin-area) img,
body:not(.admin-area) picture {
    display: block;
    max-width: 100%;
}

body:not(.admin-area) button,
body:not(.admin-area) input,
body:not(.admin-area) textarea,
body:not(.admin-area) select {
    font: inherit;
}

body:not(.admin-area) ::selection {
    background: rgba(154, 122, 50, 0.18);
    color: var(--color-text);
}

@media (max-width: 720px) {
    :root {
        --space-page-x: 28px;
    }

    body {
        font-size: 16px;
    }
}