/*
Theme Name: Transoplast Core
Description: Shared core (parent) theme for the Transoplast webshop and corporate site. Activate a child theme (shop-child or corporate-child) instead of this theme directly.
Author: Wux
Author URI: https://wux.nl/
Version: 3.0.0
*/

:root {
    --clr-lightgreen: #66b32e;

    --clr-light: #f4f5f6;
    --clr-light-contrast: #eeeeee;
    --clr-dark: #1d3763;
    --clr-headings: #3f4c58;
    --clr-text: #4c5a67;
    --clr-text-grey: #62707d;

    --clr-red: #c9142d;
    --clr-light-red: #f4d0d5;
    --clr-blue: #2081c3;
    --clr-contrast-blue: #1775b5;
    --clr-light-blue: #deecf6;
    --clr-green: #417c15;
    --clr-orange: #b37600;
    
    --clr-border: #e2e3e3;
    --clr-border-dark: #bfc7c7;

    --clr-primary: var(--clr-blue);

    /* Only for rgba() with an opacity; keep in sync with the hex values above. */
    --clr-dark-rgb: 29, 55, 99;
    --clr-headings-rgb: 63, 76, 88;
    --clr-text-rgb: 76, 90, 103;
    --clr-red-rgb: 201, 20, 45;
    --clr-blue-rgb: 32, 129, 195;
    --clr-green-rgb: 65, 124, 21;
    --clr-orange-rgb: 179, 118, 0;
    --clr-border-rgb: 226, 227, 227;
    --clr-border-dark-rgb: 191, 199, 199;

    --global-fs: 1.4rem; 
    --global-lh: 1.5;

    --global-fs-xl: 1.4rem;
    --global-lh-xl: 1.6;

    --global-fs-xxl: 1.6rem;
    --global-lh-xxl: 1.6;

    --fs-h1: clamp(2.8rem, 5vw, 3.6rem);
    --fs-h2: clamp(2rem, 4vw, 2.4rem);
    --fs-h3: clamp(1.8rem, 2.5vw, 2.2rem);

    --fs-h1-sm: clamp(2.4rem, 5vw, 3.2rem);

    --wpb-font-family: 'Open Sans', sans-serif;
    --wp--preset--font-family--cardo: 'Open Sans', sans-serif!important;
    --wp--preset--font-family--inter: 'Open Sans', sans-serif!important;
    --clr-border-color: var(--clr-border);
}

@media (min-width: 768px) {
    :root {
        --global-fs: 1.5rem;
        --global-fs-xl: 1.6rem;
        --global-fs-xxl: 1.8rem;
    }
}

@media (min-width: 992px) {
    :root {
        --global-fs-xl: 1.8rem;
        --global-fs-xxl: 2rem;
    }
}