:root {
    /* Light theme */
    --color-bg: #e4e4e4;
    --color-text: #000000;
    --color-text-secondary: #1b1b1b;
    --color-primary: #1366D6;
    --surface-0: #e4e4e41a;
    --surface-1: #e4e4e429;
    --surface-2: #e4e4e438;
    --surface-3: #ffffff20;
    --surface-4: #b6b6b6;
    --shadow-sm: 0 4px 12px #0000000f;
    --shadow-md: 0 10px 22px -18px #0000000f;
    --shadow-lg: 0 14px 28px -20px #00000017;
    --border-color: rgba(0,0,0,0.1);

    /* Radii */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;

    /* Transitions */
    --transition: 0.25s ease;

}

    /* Dark theme */

[data-theme="dark"] {
    --color-bg: #1b1b1b;
    --color-text: #ffffff;
    --color-text-secondary: #e4e4e4;
    --color-primary: #1366D6;
    --surface-0: #1b1b1b09;
    --surface-1: #1b1b1b0b;
    --surface-2: #1b1b1b0f;
    --surface-3: #00000020;
    --surface-4: #2a2a2a;
    --shadow-sm: 0 4px 12px #ffffff0f;
    --shadow-md: 0 10px 22px -18px #ffffff0f;
    --shadow-lg: 0 14px 28px -20px #ffffff17;
    --border-color: rgba(255,255,255,0.1);
}