:root {
    /* Typography */
    --font-size-base: 16px;
    --font-size-small: 14px;
    --font-size-large: 20px;
    --font-family-sans: 'Arial', sans-serif;
    --font-family-mono: 'Courier New', monospace;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --border-width: 1px;

    /* Shadow */
    --shadow-sm: 0px 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0px 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0px 10px 15px rgba(0, 0, 0, 0.2);

    /* Palette */
    --dark-cosmos: #0d0208ff;
    --dark-claret: #1a0410ff;
    --dark-amaranth-purple: #29061cff;
    --dark-rose-red: #3c081fff;
    --chocolate-cosmos: #590d22ff;
    --claret: #800f2fff;
    --amaranth-purple: #a4133cff;
    --rose-red: #c9184aff;
    --bright-pink-crayola: #ff4d6dff;
    --bright-pink-crayola-2: #ff758fff;
    --salmon-pink: #ff8fa3ff;
    --cherry-blossom-pink: #ffb3c1ff;
    --pink: #ffccd5ff;
    --lavender-blush: #fff0f3ff;

}


/* Light Mode */
:root.light {
    /* Colors */
    --color-primary: var(--chocolate-cosmos);
    --color-secondary: var(--claret);
    --color-accent: var(--amaranth-purple);
    --color-background: var(--lavender-blush);
    --color-surface: var(--pink);
    --color-text-primary: var(--rose-red);
    --color-text-secondary: var(--bright-pink-crayola);
    --color-text-muted: var(--bright-pink-crayola-2);

    /* Additional Colors */
    --color-success: #4caf50;
    --color-warning: #ff9800;
    --color-error: #f44336;

    /* Borders and Highlights */
    --color-border: #e0e0e0;
    --color-highlight: #ffb3c1ff;
}


:root.dark {
    /* Colors */
    --color-primary: var(--chocolate-cosmos);
    --color-secondary: var(--claret);
    --color-accent: var(--amaranth-purple);
    --color-background: var(--dark-cosmos);
    --color-surface: var(--dark-claret);
    --color-text-primary: var(--rose-red);
    --color-text-secondary: var(--bright-pink-crayola);
    --color-text-muted: var(--bright-pink-crayola-2);


    /* Additional Colors */
    --color-success: #81c784;
    --color-warning: #ffb74d;
    --color-error: #e57373;

    /* Borders and Highlights */
    --color-border: #333333;
    --color-highlight: #621022ff;
}