:root {
    /* Valheim-inspired color tokens */
    --color-charcoal-980: #08090b;
    --color-charcoal-950: #0f1215;
    --color-charcoal-900: #171d22;
    --color-charcoal-850: #1f2730;
    --color-charcoal-800: #27333d;

    --color-bronze-600: #785127;
    --color-bronze-500: #8f6432;
    --color-bronze-400: #a97a41;
    --color-gold-400: #b99a63;
    --color-gold-300: #ceb783;

    --color-parchment-200: #c8bda5;
    --color-parchment-100: #ddd2bb;
    --color-parchment-050: #efe3ca;
    --color-ink-950: #0a0b0d;

    /* Semantic aliases */
    --color-bg: var(--color-charcoal-980);
    --color-bg-elevated: var(--color-charcoal-950);
    --color-surface: var(--color-charcoal-900);
    --color-surface-raised: var(--color-charcoal-850);

    --color-border: #3a444e;
    --color-border-strong: #526170;
    --color-border-accent: rgb(206 183 131 / 38%);

    --color-text: var(--color-parchment-100);
    --color-text-muted: var(--color-parchment-200);
    --color-text-heading: var(--color-parchment-050);
    --color-text-inverse: var(--color-ink-950);

    --color-link: var(--color-gold-300);
    --color-accent: var(--color-bronze-400);
    --color-accent-strong: var(--color-bronze-500);
    --color-focus: #f0d9a3;

    /* Typography */
    --font-heading: "Cinzel Decorative", "Cinzel", "Noto Serif", Georgia, serif;
    --font-body: "Inter", "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;

    /* Surfaces and effects */
    --surface-iron:
        linear-gradient(168deg, rgb(255 255 255 / 4%), transparent 35%),
        radial-gradient(circle at 10% 15%, rgb(255 255 255 / 3%), transparent 32%),
        radial-gradient(circle at 90% 0%, rgb(206 183 131 / 8%), transparent 30%);

    --surface-wood:
        repeating-linear-gradient(
            172deg,
            rgb(132 97 56 / 12%) 0,
            rgb(132 97 56 / 12%) 2px,
            rgb(0 0 0 / 0%) 2px,
            rgb(0 0 0 / 0%) 9px
        ),
        linear-gradient(160deg, rgb(0 0 0 / 22%), rgb(255 255 255 / 4%));

    --focus-ring: 0 0 0 3px rgb(240 217 163 / 45%);
    --shadow-card: 0 16px 30px rgb(0 0 0 / 40%), inset 0 1px 0 rgb(255 255 255 / 4%);
    --shadow-panel: 0 0 0 1px rgb(58 68 78 / 80%), 0 14px 28px rgb(0 0 0 / 32%);
    --shadow-glow: 0 0 24px rgb(185 154 99 / 10%);
}

body {
    background-color: var(--color-bg);
    background-image:
        radial-gradient(circle at top, rgb(206 183 131 / 9%), transparent 38%),
        linear-gradient(to bottom, rgb(255 255 255 / 1%), transparent 35%);
    color: var(--color-text);
}