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

    --pws-color-primary: #DD0B2F;
    --pws-color-primary-hover: #D8B874;
    --pws-color-primary-muted: #D8B874;
    --pws-color-secondary: #D8B874;
    --pws-color-accent: #DD0B2F;

    --pws-color-heading: #000;
    --pws-color-label: #000;
    --pws-color-text-inverse: #fff;
    --pws-color-text-muted: rgba(000, 000, 000, 0.5);

    --pws-color-surface: #fff;
    --pws-color-surface-muted: #ECEBE8;
    --pws-color-surface-error: #fff0f0;
    --pws-color-surface-success: #f0fff6;
    --pws-color-surface-location-bar: #ECEBE8;
    --pws-color-border: #DBE6E9;
    --pws-color-border-error: #DD0B2F;
    --pws-color-border-success: #00b900;

    --pws-radius-button: 4px;
    --pws-radius-card: 4px;

    --pws-nav-bg: var(--pws-color-primary);
    --pws-nav-text: #fff;
    --pws-nav-text-hover: #f8cdd4;
    --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);
    --pws-logo-wrapper-bg: var(--pws-color-primary);

    --pws-button-primary-bg: var(--pws-color-primary);
    --pws-button-primary-bg-hover: var(--pws-color-secondary);
    --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-color-primary);
    --pws-button-primary-border-hover: var(--pws-color-secondary);
    --pws-button-primary-transform: initial;
    --pws-button-primary-bg-disabled: gray;
    --pws-button-primary-text-disabled: var(--pws-color-text-inverse);
    --pws-button-primary-border-disabled: gray;

    --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: initial;

    --pws-button-outline-text: #333;
    --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: #eee;
    --pws-button-outline-transform: initial;

    --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: var(--pws-color-primary);
    --pws-card-action-bg-hover: var(--pws-color-primary-hover);

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

    --pws-search-toggle-active-bg: var(--pws-color-surface);
    --pws-search-toggle-active-text: var(--pws-color-label);
    --pws-search-toggle-inactive-bg: var(--pws-color-surface-muted);
    --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-secondary);

}

@layer base {

    @font-face {
        font-display: swap;
        font-family: "Roboto";
        font-style: normal;
        font-weight: 300;
        src: url("/css/fonts/roboto/roboto-v47-latin-300.woff2") format("woff2");
    }

    @font-face {
        font-display: swap;
        font-family: "Roboto";
        font-style: italic;
        font-weight: 300;
        src: url("/css/fonts/roboto/roboto-v47-latin-300italic.woff2") format("woff2");
    }

    @font-face {
        font-display: swap;
        font-family: "Roboto";
        font-style: normal;
        font-weight: 400;
        src: url("/css/fonts/roboto/roboto-v47-latin-regular.woff2") format("woff2");
    }

    @font-face {
        font-display: swap;
        font-family: "Roboto";
        font-style: normal;
        font-weight: 500;
        src: url("/css/fonts/roboto/roboto-v47-latin-500.woff2") format("woff2");
    }

    @font-face {
        font-display: swap;
        font-family: "Roboto";
        font-style: italic;
        font-weight: 500;
        src: url("/css/fonts/roboto/roboto-v47-latin-500italic.woff2") format("woff2");
    }

    @font-face {
        font-display: swap;
        font-family: "Roboto";
        font-style: normal;
        font-weight: 700;
        src: url("/css/fonts/roboto/roboto-v47-latin-700.woff2") format("woff2");
    }

    @font-face {
        font-display: swap;
        font-family: "Roboto";
        font-style: italic;
        font-weight: 700;
        src: url("/css/fonts/roboto/roboto-v47-latin-700italic.woff2") format("woff2");
    }

    @font-face {
        font-display: swap;
        font-family: "Roboto";
        font-style: normal;
        font-weight: 900;
        src: url("/css/fonts/roboto/roboto-v47-latin-900.woff2") format("woff2");
    }

    @font-face {
        font-display: swap;
        font-family: "Roboto";
        font-style: italic;
        font-weight: 900;
        src: url("/css/fonts/roboto/roboto-v47-latin-900italic.woff2") format("woff2");
    }
}

body {
    font-family: 'Nitti Grotesk', sans-serif;
}


.logo-extension {
    display: none;
}