:root {
    /* ---- Surfaces & palette (warm dark Minecraft) ---- */
    --color-bg: #14100c;
    --color-bg-elevated: #1c1712;
    --color-bg-card: #2a231c;
    --color-bg-card-dark: #1f1914;
    --color-bg-slot: #181410;
    --color-border: rgba(107, 79, 42, 0.32);
    --color-border-strong: rgba(139, 105, 58, 0.42);
    --color-text: #ebe4d6;
    --color-text-muted: #a89478;
    --color-accent: #5a9238;
    --color-accent-hover: #72b042;
    --color-accent-dark: #3d6628;
    --color-accent-text: #1a2410;
    --color-accent-dim: rgba(90, 146, 56, 0.16);
    --color-dirt: #6b4f2a;
    --color-dirt-dark: #4a3820;
    --color-grass-light: #8bc34a;
    --color-stone: #5c564f;
    --color-gold: #c9a227;
    --color-gold-soft: #e8c547;
    --color-bg-overlay: rgba(20, 16, 12, 0.92);

    /* ---- Shop / inventory UI ---- */
    --color-shop-panel: var(--color-bg-card-dark);
    --color-shop-header: var(--color-bg-elevated);
    --color-shop-border: var(--color-border-strong);
    --color-shop-slot: #1a1510;
    --color-shop-slot-border: rgba(139, 105, 58, 0.35);
    --color-shop-slot-cost: #241c14;
    --color-shop-slot-cost-border: rgba(107, 79, 42, 0.45);
    --color-shop-slot-result: #1a2410;
    --color-shop-slot-result-border: rgba(90, 146, 56, 0.4);
    --color-shop-arrow: var(--color-accent-hover);
    --color-offline: #c45c4a;
    --color-online: #72b042;

    /* ---- Category accent colors (news / filter / calendar) ---- */
    --cat-auction: #a855f7;
    --cat-auction-soft: #d8b4fe;
    --cat-birthday: #e8c547;
    --cat-birthday-soft: #fde68a;
    --cat-event: var(--color-accent);
    --cat-event-soft: var(--color-grass-light);
    --cat-update: #38bdf8;
    --cat-update-soft: #7dd3fc;
    --cat-maintenance: #d4a017;
    --cat-maintenance-soft: #fcd34d;

    /* ---- Typography ---- */
    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Outfit', var(--font-body);
    --font-pixel: 'Press Start 2P', var(--font-display);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* ---- Spacing scale (4px base) ---- */
    --space-1: 0.25rem;  /* 4 */
    --space-2: 0.5rem;   /* 8 */
    --space-3: 0.75rem;  /* 12 */
    --space-4: 1rem;     /* 16 */
    --space-5: 1.5rem;   /* 24 */
    --space-6: 2rem;     /* 32 */
    --space-7: 3rem;     /* 48 */
    --space-8: 4rem;     /* 64 */

    /* ---- Radii ---- */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    /* ---- Minecraft panel system (softened for an airier look) ---- */
    --mc-panel-bevel-light: rgba(201, 162, 39, 0.14);
    --mc-panel-bevel-dark: rgba(0, 0, 0, 0.34);
    --mc-panel-surface-bg: var(--color-bg-card);
    --mc-panel-slot-bg: var(--color-bg-slot);
    --mc-border-outset: var(--color-border-strong);
    --mc-border-inset: rgba(0, 0, 0, 0.5);
    --mc-panel-bg:
        linear-gradient(180deg, rgba(114, 176, 66, 0.07) 0%, transparent 26%),
        linear-gradient(165deg, rgba(255, 255, 255, 0.03) 0%, transparent 42%),
        var(--mc-panel-surface-bg);
    --mc-btn-raised: rgba(201, 162, 39, 0.22);

    /* ---- Elevation / shadows ---- */
    --shadow-panel:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 -2px 4px rgba(0, 0, 0, 0.24);
    --shadow-elevated:
        0 0 0 1px var(--color-border),
        0 14px 34px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow-hover:
        0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, var(--color-border)),
        0 18px 42px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --shadow-control: var(--shadow-panel);
    --shadow-soft: var(--shadow-panel);
    --shadow-glow-accent: 0 0 20px rgba(90, 146, 56, 0.22);

    /* ---- Motion ---- */
    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    /* ---- Focus ring ---- */
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 45%, transparent);

    /* ---- Markt aliases ---- */
    --markt-accent: var(--color-accent);
    --markt-accent-soft: var(--color-accent-hover);

    /* ---- Layout ----
       Breakpoints (convention): 1024px (sidebar stacks) · 768px (compact) · 560px (mobile) */
    --layout-max-width: 1360px;
    --sidebar-width: 320px;
    --page-gutter: 1.5rem;
    --header-blur: 14px;
    --shell-panel-border: 1px solid var(--color-border-strong);
    --shell-panel-radius: var(--radius-lg);
    --shell-panel-shadow: var(--shadow-elevated);
}