:root {
    /* Primary Colors */
    /*--primary-color: #e11f3a;*/
    --primary-color: #ca1c34;
    --primary-dark: #b8182e;
    --primary-light: #ff4d6a;
    --primary-lighter: #ffe5ea;
    /* Secondary/Complementary */
    --secondary-color: #1fe1a8;
    --secondary-dark: #18b386;
    --secondary-light: #4dffbd;
    /* Accent Colors */
    --accent-blue: #1f7ae1;
    --accent-purple: #7a1fe1;
    --accent-orange: #e17a1f;
    /* Neutral Colors */
    --color-dark: #2c2c2c;
    --color-gray-dark: #555555;
    --color-gray: #888888;
    --color-gray-light: #cccccc;
    --color-light: #f5f5f5;
    --color-white: #ffffff;
    /* Semantic Colors */
    --color-success: #1fe1a8;
    --color-danger: #e11f3a;
    --color-warning: #e1a81f;
    --color-info: #1f7ae1;
    /* Borders & Backgrounds */
    --border-color: #dddddd;
    --bg-light: #fafafa;
    --bg-gray: #f0f0f0;
    /* Text Colors */
    --text-primary: #2c2c2c;
    --text-secondary: #555555;
    --text-muted: #888888;
    --text-on-primary: #ffffff;
}