:root {
    /* Surfaces */
    --bg-base:     oklch(0.18 0.008 60);
    --bg-sunken:   oklch(0.15 0.008 60);
    --bg-raised:   oklch(0.22 0.008 60);
    --bg-overlay:  oklch(0.26 0.008 60);
    --bg-inset:    oklch(0.13 0.008 60);

    /* Borders */
    --border-subtle:  oklch(0.28 0.008 60);
    --border-default: oklch(0.34 0.008 60);
    --border-strong:  oklch(0.42 0.010 60);

    /* Text */
    --text-primary:   oklch(0.95 0 0);
    --text-secondary: oklch(0.72 0 0);
    --text-tertiary:  oklch(0.55 0 0);
    --text-disabled:  oklch(0.40 0 0);

    /* Accent (brass / amber) */
    --accent:      oklch(0.72 0.10 75);
    --accent-soft: oklch(0.40 0.06 75);
    --accent-bg:   oklch(0.28 0.04 75);
    --accent-fg:   oklch(0.18 0.008 60);

    /* Semantic */
    --good: oklch(0.66 0.10 155);
    --warn: oklch(0.66 0.10 60);
    --bad:  oklch(0.66 0.10 25);
    --info: oklch(0.66 0.10 230);

    /* Card-type chips */
    --type-monster: oklch(0.58 0.07 55);
    --type-spell:   oklch(0.58 0.07 165);
    --type-trap:    oklch(0.58 0.07 350);
    --type-extra:   oklch(0.58 0.07 285);

    /* Typography */
    --font-ui:   'Inter Tight', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --fs-xs:   11px;
    --fs-sm:   12px;
    --fs-base: 13px;
    --fs-md:   14px;
    --fs-lg:   16px;
    --fs-xl:   20px;
    --fs-2xl:  28px;
    --fs-3xl:  40px;

    /* Spacing */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  20px;
    --s-6:  24px;
    --s-8:  32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;

    /* Radius */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 10px;
    --r-xl: 16px;

    /* Layout */
    --sidebar-w: 220px;
    --topbar-h:  52px;
}