:root {
    /* Colors */
    --color-primary: #007bff;
    --color-primary-hover: #0056b3;
    --color-secondary: #6c757d;
    --color-secondary-hover: #5a6268;

    --color-text-primary: #212529;
    --color-text-secondary: #6c757d;
    --color-text-dark: #495057;

    --color-background-body: #f8f9fa;
    --color-background-light: #ffffff;
    --color-background-medium: #e9ecef;

    --color-border: #dee2e6;
    --color-border-input: #ced4da;

    --color-disabled: #a9a9a9;
    --color-light-gray: #f3f3f3;

    /* Spacing & Gaps */
    --padding-xs: 0.25rem;
    --padding-s: 0.5rem;
    --padding-m: 1rem;
    --padding-l: 2rem;

    --padding-header: 1rem 2rem;
    --padding-button: 0.75rem 1.5rem;
    --padding-button-compact: 0.75rem;

    --gap-s: 0.5rem;
    --gap-m: 1rem;
    --gap-l: 2rem;

    --margin-header-p: 0.25rem 0 0;

    /* Borders & Radius */
    --border-radius-main: 0.3rem;
    --border-radius-input: 0.2rem;

    /* Font Sizes & Weights */
    --font-size-button-link: 0.9rem;
    --font-weight-bold: 600;
    --font-weight-medium: 500;

    /* Width and height */
    --height-small: 3rem;
    --height-large: 100vh;
}