:root {
    --pws-header-height: 100px;

    --pws-color-primary: #E11B21;
    --pws-color-primary-hover: #BC0E14;
    --pws-color-primary-muted: #BC0E14;
    --pws-color-secondary: #d359d5;
    --pws-color-accent: #E11B21;

    --pws-color-heading: #000;
    --pws-color-label: #333;
    --pws-color-text-inverse: #fff;
    --pws-color-text-muted: #555;

    --pws-color-surface: #fff;
    --pws-color-surface-muted: #F7F7F7;
    --pws-color-surface-error: #fef0f0;
    --pws-color-surface-location-bar: #eff7f6;
    --pws-color-border: #dfdfdf;

    --pws-radius-button: 0;
    --pws-radius-card: 0.25rem;

    --pws-nav-bg: #000;
    --pws-nav-text: var(--pws-color-text-inverse);
    --pws-nav-text-hover: var(--pws-color-text-inverse);
    --pws-nav-dropdown-bg: var(--pws-color-surface);
    --pws-nav-dropdown-text: #000;
    --pws-nav-dropdown-text-hover: var(--pws-color-text-inverse);
    --pws-nav-dropdown-bg-hover: var(--pws-color-primary-hover);
    --pws-logo-wrapper-bg: #000;

    --pws-button-primary-bg: var(--pws-color-accent);
    --pws-button-primary-bg-hover: var(--pws-color-primary-hover);
    --pws-button-primary-text: var(--pws-color-text-inverse);
    --pws-button-primary-text-hover: var(--pws-color-text-inverse);
    --pws-button-primary-border: var(--pws-button-primary-bg);
    --pws-button-primary-border-hover: var(--pws-color-text-inverse);
    --pws-button-primary-transform: uppercase;

    --pws-button-secondary-bg: var(--pws-color-secondary);
    --pws-button-secondary-bg-hover: var(--pws-color-secondary);
    --pws-button-secondary-text: var(--pws-color-text-inverse);
    --pws-button-secondary-text-hover: var(--pws-color-text-inverse);
    --pws-button-secondary-border: var(--pws-button-secondary-bg);
    --pws-button-secondary-border-hover: var(--pws-button-secondary-bg-hover);
    --pws-button-secondary-transform: uppercase;

    --pws-button-outline-text: var(--pws-color-primary);
    --pws-button-outline-text-hover: var(--pws-color-text-inverse);
    --pws-button-outline-border: var(--pws-color-primary);
    --pws-button-outline-border-hover: var(--pws-color-primary);
    --pws-button-outline-bg-hover: var(--pws-color-primary);
    --pws-button-outline-transform: uppercase;

    --pws-color-highlight-text: #00b900;
    --pws-color-highlight-bg: #00b900;
    --pws-color-highlight-bg-hover: #0f8e0f;

    --pws-input-border: var(--pws-color-border);

    --pws-card-title: var(--pws-color-label);
    --pws-card-date: var(--pws-color-primary);
    --pws-card-subtitle: var(--pws-color-primary);
    --pws-card-tag-bg: var(--pws-color-surface-muted);
    --pws-card-tag-text: #000;
    --pws-card-action-bg: #14b026;
    --pws-card-action-bg-hover: #109a20;

    --pws-cart-icon-bg: var(--pws-color-accent);
    --pws-cart-icon-text: var(--pws-color-text-inverse);
    --pws-cart-icon-bg-hover: var(--pws-color-primary-hover);
    --pws-cart-icon-text-hover: var(--pws-color-text-inverse);

    --pws-search-toggle-active-bg: var(--pws-color-primary-hover);
    --pws-search-toggle-active-text: var(--pws-color-text-inverse);
    --pws-search-toggle-inactive-bg: var(--pws-color-surface);
    --pws-search-toggle-inactive-text: var(--pws-color-text-muted);

    --pws-tooltip-bg: var(--pws-color-primary);
    --pws-tooltip-text: var(--pws-color-text-inverse);
    --pws-link: var(--pws-color-primary);
    --pws-link-hover: var(--pws-color-primary-muted);
}

@layer base {

    /* roboto-300 - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: "Roboto";
        font-style: normal;
        font-weight: 300;
        src: url("/css/fonts/roboto/roboto-v47-latin-300.woff2") format("woff2");
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* roboto-300italic - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: "Roboto";
        font-style: italic;
        font-weight: 300;
        src: url("/css/fonts/roboto/roboto-v47-latin-300italic.woff2") format("woff2");
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* roboto-regular - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: "Roboto";
        font-style: normal;
        font-weight: 400;
        src: url("/css/fonts/roboto/roboto-v47-latin-regular.woff2") format("woff2");
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* roboto-500 - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: "Roboto";
        font-style: normal;
        font-weight: 500;
        src: url("/css/fonts/roboto/roboto-v47-latin-500.woff2") format("woff2");
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* roboto-500italic - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: "Roboto";
        font-style: italic;
        font-weight: 500;
        src: url("/css/fonts/roboto/roboto-v47-latin-500italic.woff2") format("woff2");
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* roboto-700 - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: "Roboto";
        font-style: normal;
        font-weight: 700;
        src: url("/css/fonts/roboto/roboto-v47-latin-700.woff2") format("woff2");
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* roboto-700italic - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: "Roboto";
        font-style: italic;
        font-weight: 700;
        src: url("/css/fonts/roboto/roboto-v47-latin-700italic.woff2") format("woff2");
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* roboto-900 - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: "Roboto";
        font-style: normal;
        font-weight: 900;
        src: url("/css/fonts/roboto/roboto-v47-latin-900.woff2") format("woff2");
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* roboto-900italic - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: "Roboto";
        font-style: italic;
        font-weight: 900;
        src: url("/css/fonts/roboto/roboto-v47-latin-900italic.woff2") format("woff2");
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }
}

body {
    font-family: "Roboto", sans-serif;
}