@layer pages, primitives;
:root {
    --palette-white: #ffffff;
    --palette-black: #000000;
    --palette-purple: #a855f7;
    --palette-purple-hover: #9333ea;
    --palette-purple-soft: #a78bfa;
    --palette-purple-focus: #c084fc;
    --palette-purple-pale: #c4b5fd;
    --palette-purple-bright: #a855f7;
    --palette-purple-muted: #9a7be0;
    --palette-canvas: #171020;
    --palette-shell: #120b1b;
    --palette-content: #08050e;
    --palette-surface: #0b0b12;
    --palette-control: #26263a;
    --palette-border: #24242f;
    --palette-border-strong: #33334a;
    --palette-muted: #9a9aab;
    --palette-muted-dim: #8a8a9c;
    --palette-text: #e5e5ea;
    --palette-muted-deep: #5a5a70;
    --palette-muted-mid: #6b6b7c;
    --palette-light-canvas: #f8f7fa;
    --palette-light-control: #e4e1e8;
    --palette-light-surface: #efeaf5;
    --palette-danger: #df5353;
    --palette-danger-text: #f87171;
    --palette-danger-ink: #991b1b;
    --palette-danger-border: #450a0a;
    --palette-danger-surface: #18080c;
    --palette-surface-hover: #1e1e29;
    --palette-border-soft: #2c2c3a;
    --palette-text-soft: #d0d0da;
    --palette-surface-raised: #15151f;
    --palette-border-hover: #3d3d52;
    --palette-text-dim: #b4b4c4;
    --palette-success-bright: #22c55e;
    --palette-surface-inset: #22222e;
    --palette-text-pale: #eeeeee;
    --palette-muted-low: #5c5c6e;
    --palette-error-border: #4a1f1f;
    --palette-error-surface: #2a1414;
    --palette-text-medium: #b6b6c4;
    --palette-success: #28a745;
    --palette-surface-deep: #0e0a16;
    --palette-warning-surface: #23190c;
    --palette-warning-text: #d9a441;
    --palette-info-surface: #101a2a;
    --palette-info-border: #1f2f4a;
    --palette-info-text: #60a5fa;
    --palette-surface-neutral: #17171f;
    --palette-online: #3b82f6;
    --palette-in-game: #16a34a;
    --palette-control-deep: #1a1a24;
    --palette-ink: #111111;
    --palette-text-subtle: #c8c8d2;
    --palette-input: #12121b;
    --palette-border-focus: #4a4a5e;
    --palette-canvas-raised: #171026;
    --palette-error: #ef4444;
    --palette-warning-border: #3d2e14;
    --palette-control-inset: #1f1f29;
    --palette-muted-border: #55556b;
    --palette-warning: #f59e0b;
    --palette-creator: #38bdf8;
    --palette-moderator: #ff0000;
    --palette-booster: #ff4da5;
    --palette-dev: #94a3b8;
    --palette-violet-surface: #1f1729;
    --palette-violet-control: #2a1f38;
    --palette-violet-border: #3a3048;
    --palette-violet-text: #b8b8c8;
    --palette-overlay-surface: #101018;
    --palette-footer: #131019;
    --palette-warning-deep: #3a2a12;
    --palette-muted-neutral: #6b6b7b;
    --palette-light-border: rgba(0,0,0,0.15);
    --palette-backdrop: rgba(0,0,0,0.6);
    --palette-backdrop-heavy: rgba(0,0,0,0.85);
    --palette-shadow-soft: rgba(0,0,0,0.12);
    --palette-shadow: rgba(0,0,0,0.35);
    --palette-backdrop-strong: rgba(0,0,0,0.7);
    --palette-focus-shadow: rgba(168,85,247,0.25);
    --palette-error-tint: rgba(239,68,68,0.12);
    --palette-overlay-heavy: rgba(6,6,10,0.85);
    --palette-hero-shade: rgba(10,12,20,0.92);
    --palette-hero-fade: rgba(10,12,20,0.45);
    --palette-hero-clear: rgba(10,12,20,0);
    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-14: 14px;
    --space-16: 16px;
    --space-18: 18px;
    --space-20: 20px;
    --space-24: 24px;
    --space-28: 28px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --text-tiny: 0.625rem;
    --text-micro: 0.6875rem;
    --text-xs: 0.75rem;
    --text-caption: 0.8125rem;
    --text-sm: 0.875rem;
    --text-body-sm: 0.9375rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-heading-sm: 1.375rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.75rem;
    --text-4xl: 2rem;
    --text-display-sm: 2.25rem;
    --text-5xl: 2.5rem;
    --text-6xl: 3rem;
    --text-7xl: 3.5rem;
    --text-8xl: 4rem;
    --radius-sm: 4px;
    --radius-input: 5px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-portrait: 10px;
    --radius-xl: 12px;
    --radius-card: 14px;
    --radius-2xl: 16px;
    --radius-badge: 20px;
    --radius-round: 50px;
    --radius-full: 999px;
    --font-body: 'Figtree', system-ui, -apple-system, sans-serif;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --control-height: 40px;
    --control-height-sm: 32px;
    --control-height-touch: 44px;
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --avatar-size-sm: 32px;
    --avatar-size-md: 64px;
    --avatar-size-lg: 96px;
    --avatar-size-xl: 128px;
    --sticky-preview-offset: 96px;
    --motion-fast: 150ms;
    --motion-normal: 200ms;
    --motion-smooth: 240ms;
    --motion-layout: 300ms;
    --motion-reveal: 500ms;
    --motion-stagger: 18ms;
    --motion-stagger-max: 180ms;
    --motion-tab: 180ms;
    --motion-menu-exit: 120ms;
    --motion-nav-enter: 320ms;
    --motion-nav-footer: 360ms;
    --motion-spin: 1s;
    --motion-pulse: 2s;
    --motion-reveal-distance: var(--space-8);
    --motion-nav-distance: .4rem;
    --motion-popup-scale: .98;
    --motion-thumbnail-scale: 1.05;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --ease-thumbnail: cubic-bezier(0, 0, .2, 1);
    --ease-menu-in: cubic-bezier(.16, 1, .3, 1);
    --ease-menu-out: cubic-bezier(.7, 0, .84, 0);
    --ease-pulse: cubic-bezier(.4, 0, .6, 1);
    --ease-tab: ease-out;
    --color-canvas: var(--palette-canvas);
    --color-shell: var(--palette-shell);
    --color-content: var(--palette-content);
    --color-surface: var(--palette-surface-raised);
    --color-control: var(--palette-control);
    --color-text: var(--palette-white);
    --color-text-subtle: var(--palette-text);
    --color-muted: var(--palette-muted);
    --color-border: var(--palette-border);
    --color-border-strong: var(--palette-border-strong);
    --color-primary: var(--palette-purple);
    --color-primary-hover: var(--palette-purple-hover);
    --color-on-primary: var(--palette-white);
    --color-danger: var(--palette-danger);
    --color-danger-text: var(--palette-danger);
    --color-on-danger: var(--palette-white);
    --color-error: var(--palette-danger-text);
    --color-focus: var(--palette-purple-focus);
    --color-link: var(--palette-purple-soft);
    --color-backdrop: var(--palette-backdrop);
}
:root[data-theme="light"] {
    --color-canvas: var(--palette-light-canvas);
    --color-shell: var(--palette-light-surface);
    --color-content: var(--palette-light-canvas);
    --color-surface: var(--palette-light-surface);
    --color-control: var(--palette-light-control);
    --color-text: var(--palette-black);
    --color-text-subtle: var(--palette-canvas);
    --color-muted: var(--palette-muted-deep);
    --color-border: var(--palette-light-border);
    --color-border-strong: var(--palette-light-border);
    --color-danger-text: var(--palette-danger-ink);
    --color-error: var(--palette-danger-ink);
    --color-focus: var(--palette-purple);
    --color-link: var(--palette-purple);
}
@media (prefers-reduced-motion: reduce) {
    :root { --motion-fast: 0ms; --motion-normal: 0ms; --motion-smooth: 0ms; --motion-layout: 0ms; --motion-reveal: 0ms; --motion-stagger: 0ms; --motion-stagger-max: 0ms; --motion-tab: 0ms; --motion-menu-exit: 0ms; --motion-nav-enter: 0ms; --motion-nav-footer: 0ms; }
}