:root {
    /* Brand colors */
    --color-primary: #B39DDB;      /* Light purple */
    --color-secondary: #C8E6C9;    /* Light green */
    --color-danger: #d32f2f;
    --color-danger-light: #ffcdd2;
    --color-danger-hover: #ef9a9a;
    --color-success: #2e7d32;

    /* Text colors */
    --text-main: #333;
    --text-muted: #555;
    --text-light: white;

    /* Backgrounds */
    --bg-main: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
    --bg-header: rgba(51, 0, 102, 0.3);
    --bg-stepper: rgba(255, 255, 255, 0.7);
    --bg-form: white;
    --bg-warning: #FFEE8C;

    /* Borders */
    --border-main: #ccc;
    --border-highlight: var(--color-primary);
    --border-warning: #A18262;

    /* Shadows */
    --box-shadow-header: 0 2px 4px rgba(0, 0, 0, 0.2);
    --box-shadow-form: 0 2px 8px rgba(0, 0, 0, 0.1);

    /* Fonts */
    --font-main: 'Inter', sans-serif;

    /* Radii */
    --radius-small: 6px;
    --radius-medium: 8px;
    --radius-large: 12px;
    --radius-full: 20px;

        /* Neutral Grays */
    --gray-light: #ddd;         /* Light gray for borders or subtle backgrounds */
    --gray-medium: #ccc;        /* Medium gray for separators or UI accents */

    /* Accents and Highlights */
    --green-soft: #AED6B5;      /* Soft green for highlights or success states */

    /* Errors and Warnings */
    --red-strong: #c62828;      /* Strong red for errors, alerts or danger buttons */
    --red-darkest: #b71c1c;     /* Darkest red for critical error elements or hover states */
}