:root {
    color-scheme: dark;
    --color-bg: #0c0b09;
    --color-bg-elevated: #11100d;
    --color-surface: #15130f;
    --color-surface-hover: #1c1914;
    --color-surface-active: #242018;
    --color-text: #eee8dc;
    --color-text-muted: #b3a692;
    --color-text-subtle: #817564;
    --color-gold: #b99756;
    --color-gold-bright: #d2b374;
    --color-gold-dark: #735b31;
    --color-danger: #7b2824;
    --color-danger-bright: #aa4037;
    --color-success: #4f8a5a;
    --color-border: #352d22;
    --color-border-light: #53442f;
    --color-focus: #f0cf87;
    --section-rules: #6f91aa;
    --section-compendium: #809b65;
    --section-creation: #b38a45;
    --section-universe: #98778f;
    --section-table: #a14b42;
    --visual-text: #eee8dc;
    --visual-text-muted: #c9bba5;
    --visual-text-subtle: #a99c88;
    --overlay-feature-hero: linear-gradient(90deg, rgb(10 9 8 / 96%) 0%, rgb(10 9 8 / 82%) 35%, rgb(10 9 8 / 30%) 72%, rgb(10 9 8 / 12%) 100%), linear-gradient(0deg, rgb(10 9 8 / 76%), transparent 60%);
    --overlay-feature-card: linear-gradient(90deg, rgb(10 9 8 / 96%) 0%, rgb(10 9 8 / 68%) 46%, rgb(10 9 8 / 22%) 100%), linear-gradient(0deg, rgb(10 9 8 / 55%), transparent 70%);
    --overlay-feature-compact: linear-gradient(90deg, rgb(10 9 8 / 96%) 0%, rgb(10 9 8 / 78%) 58%, rgb(10 9 8 / 38%) 100%), linear-gradient(0deg, rgb(10 9 8 / 88%), transparent 75%);
    --shadow-card: 0 3px 12px rgb(0 0 0 / 18%);
    --shadow-header: 0 4px 18px rgb(0 0 0 / 24%);
    --font-display: "Cinzel", "Cormorant Garamond", "Lora", Georgia, serif;
    --font-body: "Source Sans 3", "Noto Sans", "Segoe UI", system-ui, sans-serif;
    --text-xs: 0.72rem;
    --text-sm: 0.82rem;
    --text-lg: 1.15rem;
    --text-xl: 1.45rem;
    --heading-sm: 0.95rem;
    --heading-md: 1.15rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.35rem;
    --radius-lg: 0.5rem;
    --content-width: 1440px;
    --header-height: 72px;
    --z-toolbar: 30;
    --z-sticky-control: 35;
    --z-header: 1000;
    --z-modal-backdrop: 1040;
    --z-drawer-backdrop: 1050;
    --z-filter-backdrop: 1090;
    --z-drawer: 1100;
    --z-overlay: 1200;
    --z-panel: 1210;
    --z-status: 1240;
    --z-popover: 1250;
    --transition-fast: 160ms ease;
    --page-background:
        radial-gradient(circle at 18% -10%, rgb(196 161 93 / 7%), transparent 30rem),
        linear-gradient(145deg, #0e0d0c 0%, var(--color-bg) 55%, #15120f 100%);
}

:root[data-theme="light"] {
    color-scheme: light;
    --color-bg: #eee9df;
    --color-bg-elevated: #f6f1e7;
    --color-surface: #fffaf0;
    --color-surface-hover: #f1e9da;
    --color-surface-active: #e8ddca;
    --color-text: #26211b;
    --color-text-muted: #665b4d;
    --color-text-subtle: #655847;
    --color-gold: #80652f;
    --color-gold-bright: #654c1f;
    --color-gold-dark: #ad8a43;
    --color-danger: #842d28;
    --color-danger-bright: #a83c34;
    --color-success: #3f7649;
    --color-border: #c9bda9;
    --color-border-light: #a89576;
    --color-focus: #6e4e12;
    --shadow-card: 0 3px 12px rgb(54 40 20 / 9%);
    --shadow-header: 0 4px 18px rgb(54 40 20 / 11%);
    --page-background:
        radial-gradient(circle at 18% -10%, rgb(128 101 47 / 10%), transparent 30rem),
        linear-gradient(145deg, #f4efe5 0%, var(--color-bg) 55%, #e8dfd0 100%);
}

:root[data-session="true"] {
    --color-text: #fffaf0;
    --color-text-muted: #d8cdbb;
    --color-text-subtle: #b8aa95;
    --color-border: #5a5043;
    --color-border-light: #806d50;
    --page-background: var(--color-bg);
}

:root[data-theme="light"][data-session="true"] {
    --color-text: #18140f;
    --color-text-muted: #4f4538;
    --color-text-subtle: #655847;
    --color-border: #b8a98f;
    --color-border-light: #806a49;
    --page-background: var(--color-bg);
}

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

html {
    min-width: 320px;
    background: var(--color-bg);
    scroll-behavior: smooth;
}

@media (min-width: 641px) and (hover: hover) and (pointer: fine) {
    html { scrollbar-gutter: stable; }
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--color-text);
    background: var(--page-background);
    font-family: var(--font-body);
    line-height: 1.5;
}

:root[data-session="true"] body {
    font-size: 1.0625rem;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: var(--color-gold-bright);
}

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    vertical-align: -0.125em;
}

::selection {
    color: #17120b;
    background: var(--color-gold-bright);
}

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

* {
    scrollbar-color: var(--color-gold-dark) var(--color-bg-elevated);
    scrollbar-width: thin;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: more) {
    :root {
        --color-text-muted: var(--color-text);
        --color-text-subtle: var(--color-text);
        --color-border: var(--color-border-light);
    }

    :focus-visible {
        outline-width: 3px;
    }
}

@media (forced-colors: active) {
    :focus-visible {
        outline: 3px solid Highlight;
    }

    button,
    input,
    select,
    textarea,
    summary,
    a {
        forced-color-adjust: auto;
    }
}