:root {
    --bg-main: #1a1a1a;
    --bg-card: #222;
    --bg-sidebar: #161616;
    --bg-chat: #1c1c1c;
    --bg-input: #222;
    --bg-header: #111;
    --accent: #ffcc00;
    --msg-me: #404040;
    --msg-other: #2a2a2a;
    --text-main: #e5e5e5;
    --text-muted: #888;
    --border-color: #333;

    /* component */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;

    /* button tokens */
    --btn-secondary-bg: #262626;
    --btn-secondary-bg-hover: #2e2e2e;
    --btn-secondary-border: #3d3d3d;
    --btn-secondary-border-hover: #4a4a4a;
    --btn-danger-bg: #7f2727;
    --btn-danger-bg-hover: #933030;
    --btn-danger-border: #9b3434;
    --btn-danger-border-hover: #b13e3e;

    /* chess ui tokens */
    --chess-surface-0: #151515;
    --chess-surface-1: #1e1e1e;
    --chess-surface-2: #252525;
    --chess-surface-3: #2a2a2a;
    --chess-surface-4: #2b2b2b;
    --chess-surface-5: #363636;
    --chess-surface-6: #383838;
    --chess-border-strong: #4a4a4a;
    --chess-border-soft: #5b5b5b;
    --chess-border-muted: #7a3b3b;
    --chess-text-strong: #f2f2f2;
    --chess-text-invert: #121212;
    --chess-live-bg: rgba(255, 80, 80, 0.15);
    --chess-live-border: rgba(255, 80, 80, 0.3);
    --chess-live-text: #ff8080;
    --chess-overlay: rgba(0, 0, 0, 0.56);
    --chess-modal-backdrop: rgba(0, 0, 0, 0.6);
    --chess-hover-soft: rgba(255, 255, 255, 0.03);
    --chess-hover-soft-2: rgba(255, 255, 255, 0.06);
    --chess-hover-soft-3: rgba(255, 255, 255, 0.14);
    --chess-line-soft: rgba(255, 255, 255, 0.06);
    --chess-panel-soft: rgba(255, 255, 255, 0.02);
    --chess-field-shadow: rgba(0, 0, 0, 0.16);
    --chess-select-dot: rgba(0, 0, 0, 0.28);
    --chess-highlight-dark: rgba(0, 0, 0, 0.18);
    --chess-highlight-hover: rgba(0, 0, 0, 0.2);
    --chess-timer-active-bg: #f0f0f0;
    --chess-timer-active-text: #0f0f0f;
    --chess-timer-low-bg: #d64242;
    --chess-timer-low-text: #ffffff;
    --chess-online: #53d87b;
    --chess-win: #68df8f;
    --chess-loss: #f27a7a;
    --chess-draw: #c8c8c8;
    --chess-draw-strong: #e4cb85;
}
