@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Typography (single switch point) */
    --font-family-title: 'Outfit', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    --font-weight-title: 700;
    --font-weight-body: 400;

    /* Bootstrap bridge for typography */
    --bs-font-sans-serif: var(--font-family-body);
    --bs-body-font-family: var(--font-family-body);

    /*
     Font preset examples (copy/paste into vars above to test quickly):
     1) Classic: title='Merriweather', Georgia, serif | body='Source Sans 3', sans-serif
     2) Modern:  title='Outfit', sans-serif | body='Inter', sans-serif
     3) Friendly: title='Poppins', sans-serif | body='Nunito Sans', sans-serif
    */

    /* 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);
}

html,
body,
input,
button,
select,
textarea {
    font-family: var(--font-family-body) !important;
    font-weight: var(--font-weight-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-title {
    font-family: var(--font-family-title) !important;
    font-weight: var(--font-weight-title);
}

.font-body {
    font-family: var(--font-family-body) !important;
}

code,
pre,
kbd,
samp {
    font-family: var(--font-family-mono);
}