:root {
    --color-black: #000000;
    --color-gray-dark: #5c5c5c;
    --color-gray: #e5e5e5;
    --color-gray-light: #f2f2f2;
    --color-white: #ffffff;
    --color-accent: #fa6500;
    --color-green: #37ab46;
    --color-white-transparent: rgba(255, 255, 255, 0.75);

    --header-height: 140px;

    --radius-sm: 5px;
    --radius-md: 10px;
    --radius-lg: 20px;
    --radius-pill: 30px;

    --border-md: 2px solid var(--color-accent);

    --offset: 20px;

    --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.08);
    --blur-soft: blur(5px);
    --transition: 0.3s ease-in-out;

    /* Range slider */
    --range-track-height: 5px;
    --range-thumb-size: 24px;

    /* Switch — overridden per option, the component reads these */
    --switch-width: 32px;
    --switch-height: 16px;
    --switch-knob-size: 14px;
    --switch-knob-offset: 1px;
    --switch-off-color: #ccc;
    --switch-on-color: var(--color-accent);
    --switch-knob-color: var(--color-gray-light);

    --upload-button-width: 280px;
}
