:root {
    --color-primary-light: #7c3aed;
    --color-primary-dark: #a970ff;
    --color-primary-hover-light: #6d28d9;
    --color-primary-hover-dark: #b98cff;

    --color-background-light: #f3f0f7;
    --color-background-dark: #18181b;

    --color-surface-light: #d6adfcf2;
    --color-surface-dark: #140a1ef2;

    --color-surface-alt-light: #e2c6fdf2;
    --color-surface-alt-dark: #241b32;

    --color-input-light: #e2c6fdf2;;
    --color-input-dark: #18121f;

    --color-border-light: #d8ceeb;
    --color-border-dark: #40334d;

    --color-text-light: #231934;
    --color-text-dark: #f4f4f5;

    --color-text-muted-light: #6b5d82;
    --color-text-muted-dark: #b7b7bd;

    --color-text-inverse-light: #ffffff;
    --color-text-inverse-dark: #ffffff;

    --color-tag-light: #ebdffc;
    --color-tag-dark: #30243f;

    --color-secondary-light: #6b5d82;
    --color-secondary-dark: #333338;

    --color-admin-light: #e11d48;
    --color-admin-dark: #fb7185;

    --color-dev-light: #0d9488;
    --color-dev-dark: #287b74;

    --color-nat-light: #2563eb;
    --color-nat-dark: #5472d4;

    --color-overlay-light: rgba(35, 25, 52, 0.08);
    --color-overlay-dark: rgba(0, 0, 0, 0.5);

    --color-watermark-light: rgba(35, 25, 52, 0.12);
    --color-watermark-dark: rgba(255, 255, 255, 0.2);

    --shadow-light: rgba(0, 0, 0, 0.15);
    --shadow-dark: rgba(0, 0, 0, 0.55);

    --highlight-light: rgba(255, 255, 255, 0.045);
    --highlight-dark: rgba(255, 255, 255, 0.045);

    --sidebar-width: 280px;

    --radius-small: 10px;
    --radius-medium: 14px;
    --radius-large: 18px;

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    --color-primary: var(--color-primary-dark);
    --color-primary-hover: var(--color-primary-hover-dark);
    --color-background: var(--color-background-dark);
    --color-surface: var(--color-surface-dark);
    --color-surface-alt: var(--color-surface-alt-dark);
    --color-input: var(--color-input-dark);
    --color-border: var(--color-border-dark);
    --color-text: var(--color-text-dark);
    --color-text-muted: var(--color-text-muted-dark);
    --color-text-inverse: var(--color-text-inverse-dark);
    --color-tag: var(--color-tag-dark);
    --color-secondary: var(--color-secondary-dark);
    --color-admin: var(--color-admin-dark);
    --color-dev: var(--color-dev-dark);
    --color-nat: var(--color-nat-dark);
    --color-overlay: var(--color-overlay-dark);
    --color-watermark: var(--color-watermark-dark);
    --shadow: var(--shadow-dark);
    --highlight: var(--highlight-dark);
}
html[data-theme="light"] {
    --color-primary: var(--color-primary-light);
    --color-primary-hover: var(--color-primary-hover-light);
    --color-background: var(--color-background-light);
    --color-surface: var(--color-surface-light);
    --color-surface-alt: var(--color-surface-alt-light);
    --color-input: var(--color-input-light);
    --color-border: var(--color-border-light);
    --color-text: var(--color-text-light);
    --color-text-muted: var(--color-text-muted-light);
    --color-text-inverse: var(--color-text-inverse-light);
    --color-tag: var(--color-tag-light);
    --color-secondary: var(--color-secondary-light);
    --color-admin: var(--color-admin-light);
    --color-dev: var(--color-dev-light);
    --color-nat: var(--color-nat-light);
    --color-overlay: var(--color-overlay-light);
    --color-watermark: var(--color-watermark-light);
    --shadow: var(--shadow-light);
    --highlight: var(--highlight-light);
}

html[data-theme="dark"] {
    --color-primary: var(--color-primary-dark);
    --color-primary-hover: var(--color-primary-hover-dark);
    --color-background: var(--color-background-dark);
    --color-surface: var(--color-surface-dark);
    --color-surface-alt: var(--color-surface-alt-dark);
    --color-input: var(--color-input-dark);
    --color-border: var(--color-border-dark);
    --color-text: var(--color-text-dark);
    --color-text-muted: var(--color-text-muted-dark);
    --color-text-inverse: var(--color-text-inverse-dark);
    --color-tag: var(--color-tag-dark);
    --color-secondary: var(--color-secondary-dark);
    --color-admin: var(--color-admin-dark);
    --color-dev: var(--color-dev-dark);
    --color-nat: var(--color-nat-dark);
    --color-overlay: var(--color-overlay-dark);
    --color-watermark: var(--color-watermark-dark);
    --shadow: var(--shadow-dark);
    --highlight: var(--highlight-dark);
}