:root {
    /* Brand / primair */
    --color-primary: #F38651;
    --color-primary-600: #d96f3f;
    /* hover */
    --color-primary-700: #c9633a;
    /* active */
    --rgb-primary: 243, 134, 81;
    
    /* Primary gradient */
    --gradient-primary: linear-gradient(45deg, var(--color-primary), #f3ad51);

    /* fuel type colors */
    --fuel-type-diesel: #000;
    --fuel-type-e10: #57b757;
    --fuel-type-e5: #da4848;

    /* Charts */
    --chart-1: #000000;
    --chart-2: #16a34a;
    --chart-3: #ef4444;

    --color-offwhite-background: #fefcf9;

    /* Tekst & basiskleuren */
    --color-text: #212529;
    --color-text-strong: #000000;
    --color-muted: #6c757d;

    --color-bg: #ffffff;
    --color-surface: #fafafa;

    /* Randen & schaduwen (gebruik RGB's voor rgba) */
    --rgb-black: 0, 0, 0;
    --rgb-white: 255, 255, 255;
    --color-border-subtle: rgba(var(--rgb-black), .06);
    --color-border: rgba(var(--rgb-black), .10);
    --shadow-sm: 0 1px 2px rgba(var(--rgb-black), .20);
    --shadow-md: 0 4px 8px rgba(var(--rgb-black), .10);
    --shadow-lg: 0 4px 12px rgba(var(--rgb-black), .12);

    /* Glass / blur knoppen */
    --glass-bg: rgba(var(--rgb-white), .10);
    --glass-bg-hover: rgba(var(--rgb-white), .12);
    --glass-border: rgba(var(--rgb-white), .10);
    --glass-border-hover: rgba(var(--rgb-black), .05);
    --glass-focus: 0 0 0 3px rgba(var(--rgb-black), .08);

    /* Mark / highlight amber (voor gradients met alpha) */
    --color-amber: #FFBD59;
    --rgb-amber: 255, 189, 89;

    /* Hero gear */
    --color-gear: #fde7af;

    /* Neon rand (behoud je effect, gekoppeld aan brand) */
    --neon-1: var(--color-primary);
    --neon-2: #FDE881;
    --neon-3: var(--color-primary);
    --neon-4: #FDE881;

    /* Bootstrap bridge (mag blijven als je BS tokens gebruikt) */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--rgb-primary);
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-primary-600);

    /* border radius */
    --border-radius-1: calc(8px + 0.5em + 1em);
    --border-radius-2: calc(8px + 0.5em);
    --border-radius-3: calc(8px);
}