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

    --pws-color-primary: #000;
    --pws-color-primary-hover: #D9C900;
    --pws-color-primary-muted: #000;
    --pws-color-secondary: #d359d5;
    --pws-color-accent: #FFE50F;

    --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: #101419;
    --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);
    --pws-logo-wrapper-bg: #101419;

    --pws-button-primary-bg: var(--pws-color-accent);
    --pws-button-primary-bg-hover: #D9C900;
    --pws-button-primary-text: #000;
    --pws-button-primary-text-hover: #000;
    --pws-button-primary-border: var(--pws-button-primary-bg);
    --pws-button-primary-border-hover: #D9C900;
    --pws-button-primary-transform: uppercase;
    --pws-button-primary-bg-disabled: #B6B0AA;

    --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-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-color: #fff;
    --pws-card-action-border: #14b026;
    --pws-card-action-bg-hover: #109a20;
    --pws-card-action-color-hover: #fff;
    --pws-card-action-border-hover: #109a20;

    --pws-cart-icon-bg: #E11B21;
    --pws-cart-icon-text: var(--pws-color-text-inverse);
    --pws-cart-icon-bg-hover: #BC0E14;
    --pws-cart-icon-text-hover: var(--pws-color-text-inverse);

    --pws-search-toggle-active-bg: var(--pws-color-accent);
    --pws-search-toggle-active-text: #000;
    --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 {
    @font-face {
        font-display: swap;
        font-family: "N27";
        font-style: normal;
        font-weight: 300;
        src: url("/css/fonts/N27/n27-light-webfont.woff2")
            format("woff2");
    }
    @font-face {
        font-display: swap;
        font-family: "N27";
        font-style: italic;
        font-weight: 300;
        src: url("/css/fonts/N27/n27-lightitalic-webfont.woff2")
            format("woff2");
    }
    @font-face {
        font-display: swap;
        font-family: "N27";
        font-style: normal;
        font-weight: 400;
        src: url("/css/fonts/N27/n27-regular-webfont.woff2")
            format("woff2");
    }
    @font-face {
        font-display: swap;
        font-family: "N27";
        font-style: italic;
        font-weight: 400;
        src: url("/css/fonts/N27/n27-regularitalic-webfont.woff2")
            format("woff2");
    }
    @font-face {
        font-display: swap;
        font-family: "N27";
        font-style: normal;
        font-weight: 700;
        src: url("/css/fonts/N27/n27-bold-webfont.woff2")
            format("woff2");
    }
    @font-face {
        font-display: swap;
        font-family: "N27";
        font-style: italic;
        font-weight: 700;
        src: url("/css/fonts/N27/n27-bolditalic-webfont.woff2")
            format("woff2");
    }
    @font-face {
        font-display: swap;
        font-family: "Inter";
        font-style: normal;
        font-weight: 300;
        src: url("/css/fonts/inter/Inter-Light.woff2")
            format("woff2");
    }
    @font-face {
        font-display: swap;
        font-family: "Inter";
        font-style: italic;
        font-weight: 300;
        src: url("/css/fonts/inter/Inter-LightItalic.woff2")
            format("woff2");
    }
    @font-face {
        font-display: swap;
        font-family: "Inter";
        font-style: normal;
        font-weight: 400;
        src: url("/css/fonts/inter/Inter-Regular.woff2")
            format("woff2");
    }
    @font-face {
        font-display: swap;
        font-family: "Inter";
        font-style: italic;
        font-weight: 400;
        src: url("/css/fonts/inter/Inter-RegularItalic.woff2")
            format("woff2");
    }
    @font-face {
        font-display: swap;
        font-family: "Inter";
        font-style: normal;
        font-weight: 700;
        src: url("/css/fonts/inter/Inter-Bold.woff2")
            format("woff2");
    }
    @font-face {
        font-display: swap;
        font-family: "Inter";
        font-style: italic;
        font-weight: 700;
        src: url("/css/fonts/inter/Inter-BoldItalic.woff2")
            format("woff2");
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: "N27", serif;
}

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