:root {
    --gray-100: #f5f5f5;
    --gray-300: #dddddd;
    --gray-500: #888888;
    --gray-600: #666666;
    --gray-700: #333333;
    --gray-800: #2a2a2a;
    --gray-850: #1e1e1e;
    --gray-900: #141414;

    --orange-500: #ff825c;
    --yellow-500: #ffd600;
    --purple-500: #b548c6;
    --blue-500: #48a5c6;
    --green-500: #6bc648;

    --bg-canvas: var(--gray-900);
    --bg-card: var(--gray-900);
    --bg-surface: var(--gray-700);

    --text-heading: var(--gray-100);
    --text-body: var(--gray-100);
    --text-muted: var(--gray-500);

    --text-link: var(--gray-100);
    --text-link-hover: var(--gray-300);

    --border-subtle: var(--gray-700);
    --border-focus: var(--gray-600);
    --border-hover: var(--gray-800);

    --tag-interactive: var(--orange-500);
    --tag-designer: var(--yellow-500);
    --tag-mastermind: var(--purple-500);
    --tag-maps: var(--blue-500);
    --tag-hands: var(--green-500);

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;

    --font-main: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    --text-xs: 0.8rem;
    --text-sm: 0.9rem;
    --text-base: 1rem;
    --text-md: 1.1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;

    --container-normal: 650px;
    --container-wide: 1200px;
    --container-max: 1440px;

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 8px 12px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
    --transition-base: 0.3s ease;
    --transition-fast: 0.2s ease;
}