@font-face {
    font-family: OpenSansRegular;
    src: url(https://images.door-commerce.co.uk/fonts/OpenSansRegular.woff2) format('woff2'), url(https://images.door-commerce.co.uk/fonts/OpenSansRegular.woff) format('woff');
    font-display: swap
}
@font-face {
    font-family: OpenSansBold;
    src: url(https://images.door-commerce.co.uk/fonts/OpenSansBold.woff2) format('woff2'), url(https://images.door-commerce.co.uk/fonts/OpenSansBold.woff) format('woff');
    font-display: swap
}
@font-face {
    font-family: RobotoCondensed;
    src: url(https://images.door-commerce.co.uk/fonts/RobotoCondensed.woff2) format('woff2'), url(https://images.door-commerce.co.uk/fonts/RobotoCondensed.woff) format('woff');
    font-display: swap
}
@font-face {
    font-family: RobotoBoldCondensed;
    src: url(https://images.door-commerce.co.uk/fonts/RobotoBoldCondensed.woff2) format('woff2'), url(https://images.door-commerce.co.uk/fonts/RobotoBoldCondensed.woff) format('woff');
    font-display: swap
}

:root {
    /* COLOR */
    --color-primary: #40434c;
    --color-secondary:#e1ecfa;
    --color-secondary-dark: #5f819c;
    --color-secondary-light: #7d9db9;
    --color-background: #efefef;
	--color-background-dark: rgba(82, 87, 105, 1);
    --color-accent: #c00;
    --color-border: #ccc;
    --color-shadowbox: #888;

    /* FONTS */
    --font-generic: Helvetica;
    --font-primary: OpenSansRegular;
    --font-primary-bold: OpenSansBold;
    --font-secondary: RobotoCondensed;
    --font-secondary-bold: RobotoBoldCondensed;

    /* FONT SIZE */
    --font-size-body: 1rem; /* 16px */
    --font-size-h1: clamp(2rem, 4vw, 3rem);  /* 32px → 48px */
    --font-size-h2: clamp(1.5rem, 3vw, 2.25rem); /* 24px → 36px */

    /* BREAKPOINT */
    --bp-tablet: 768px;
    --bp-desktop: 1024px;
    --bp-large: 1200px;
    --bp-xl: 1440px;
}