:root {
    --bg: #f5eed8;
    --bg-elev: #ede5c5;
    --bg-card: #e5dcba;
    --bg-card-hi: #dad1ac;
    --border: #7a5c32;
    --border-soft: #a88456;
    --ink: #1c1406;
    --ink-soft: #3c2c10;
    --ink-muted: #6a5030;
    --ink-faint: #9a7850;
    --gold: #7a5810;
    --gold-bright: #9a7018;
    --copper: #7a3e14;
    --green: #3a5c18;
    --red: #882020;
    --display: 'IM Fell English SC', serif;
    --display-body: 'IM Fell English', serif;
    --body: 'EB Garamond', serif;
}

body.dark {
    --bg: #14100c;
    --bg-elev: #1f1812;
    --bg-card: #271f17;
    --bg-card-hi: #2f2519;
    --border: #4a3a26;
    --border-soft: #3a2e1f;
    --ink: #ede0c4;
    --ink-soft: #c7b48a;
    --ink-muted: #8a7a5a;
    --ink-faint: #5d5240;
    --gold: #d4af5c;
    --gold-bright: #f0c870;
    --copper: #c07a3a;
    --green: #8aa860;
    --red: #b54848;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

button, a, input, select, textarea, [role="button"] {
    touch-action: manipulation;
}

html,
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.5;
    height: 100%;
    overflow: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
        radial-gradient(ellipse at top left, rgba(122, 88, 16, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(122, 62, 20, 0.04) 0%, transparent 50%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0.05 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
    opacity: 0.8;
}

body.dark::before {
    background-image:
        radial-gradient(ellipse at top left, rgba(212, 175, 92, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(192, 122, 58, 0.03) 0%, transparent 50%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
    opacity: 0.7;
}