:root {
    --color-page: #f8f6f1;
    --color-panel: #fffdf8;
    --color-text: #1f1d1a;
    --color-muted: #6d655c;
    --color-line: #e8e0d4;
    --color-primary: #1f4f46;
    --color-primary-hover: #173c35;
    --color-accent: #b55336;
    --color-focus: #3f7f72;
    --shadow-soft: 0 24px 80px rgba(49, 41, 31, 0.12);
    --radius-small: 12px;
    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-serif: Georgia, "Times New Roman", serif;
}

@font-face {
    font-family: "Crystal Light";
    src: url("../fonts/Crystal-Light.ttf") format("truetype");
    font-display: swap;
}

* {
    box-sizing: border-box;
}

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

body {
    min-height: 100vh;
    margin: 0;
    color: var(--color-text);
    background:
        linear-gradient(135deg, rgba(246, 238, 226, 0.88), rgba(250, 248, 243, 0.96) 42%, rgba(238, 246, 242, 0.9)),
        var(--color-page);
    font-family: var(--font-sans);
    line-height: 1.5;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: wait;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 3px solid rgba(63, 127, 114, 0.35);
    outline-offset: 3px;
}

::selection {
    color: #ffffff;
    background: var(--color-primary);
}

.wordmark {
    display: inline-block;
    color: #000000;
    font-family: "Crystal Light", var(--font-serif);
    font-weight: 400;
    letter-spacing: 0;
}