:root {
    --bg-color: #ebedf0;
    --header-bg: #ffffff;
    --card-bg: #ffffff;
    --text-color: #000000;
    --text-muted: #818c99;
    --border-color: #e1e3e6;
    --divider-color: #e1e3e6;
    --sidebar-border: #d7d8dc;
    --search-bg: #ebedf0;
    --search-text: #000000;
    --create-btn-bg: #d9dce0;
    --menu-btn-bg: #f1f3f7;
    --svg-color: #4c4a4a;
    --special-story-bg: #f0f2f5;
    --dropdown-bg: #ffffff;
    --dropdown-hover: #f5f6f8;
    --mobile-nav-bg: rgba(255, 255, 255, 0.85);
    --mobile-nav-border: rgba(0, 0, 0, 0.15);
    --accent-color: #ff3366;
    --bonus-bg: #fff9db;
    --bonus-border: rgba(245, 159, 0, 0.25);
    --bonus-text: #393a3b;
}

[data-theme="dark"] {
    --bg-color: #111111;
    --header-bg: #1c1c1e;
    --card-bg: #1c1c1e;
    --text-color: #f5f5f7;
    --text-muted: #8e8e93;
    --border-color: #2c2c2e;
    --divider-color: #38383a;
    --sidebar-border: #2c2c2e;
    --search-bg: #2c2c2e;
    --search-text: #f5f5f7;
    --create-btn-bg: #2c2c2e;
    --menu-btn-bg: #2c2c2e;
    --svg-color: #c6c6cb;
    --special-story-bg: #2c2c2e;
    --dropdown-bg: #2c2c2e;
    --dropdown-hover: #3a3a3c;
    --mobile-nav-bg: rgba(28, 28, 30, 0.85);
    --mobile-nav-border: rgba(255, 255, 255, 0.15);
    --accent-color: #ff453a;
    --bonus-bg: #2c2612;
    --bonus-border: rgba(245, 159, 0, 0.15);
    --bonus-text: #e2e8f0;
}