@font-face {
    font-family: "Montserrat";
    src: url("../../Fonts/Montserrat/Montserrat-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../../Fonts/Montserrat/Montserrat-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../../Fonts/Montserrat/Montserrat-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../../Fonts/Montserrat/Montserrat-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --product-primary: #0079C2;
    --product-secondary: #54A6D6;
    --product-accent: #B2D235;
    --product-inverse: #1f3442;
    --product-font: "Montserrat", system-ui, -apple-system, Arial, sans-serif;
    --font: var(--product-font);
    --primary-font-family: var(--product-font);
    --product-page-bg: #f7f8fa;
    --product-panel-bg: #ffffff;
    --product-muted-bg: #f8fafc;
    --product-text: #2F3133;
    --product-text-muted: #6c757d;
    --product-text-inverse: #ffffff;
    --product-border: #dee2e6;
    --product-focus-ring: rgba(0, 121, 194, 0.28);
    --product-shadow-soft: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
    --brand-primary: var(--product-primary);
    --brand-secondary: var(--product-secondary);
    --brand-accent: var(--product-accent);
    --surface-page: var(--product-page-bg);
    --surface-panel: var(--product-panel-bg);
    --surface-muted: var(--product-muted-bg);
    --surface-inverse: var(--product-inverse);
    --text-primary: var(--product-text);
    --text-secondary: var(--product-secondary);
    --text-muted: var(--product-text-muted);
    --text-inverse: var(--product-text-inverse);
    --border-subtle: var(--product-border);
    --focus-ring: var(--product-focus-ring);
    --shadow-soft: var(--product-shadow-soft);
    --button-primary-bg: var(--product-primary);
    --button-primary-text: var(--product-text-inverse);
    --button-primary-border: var(--product-primary);
    --button-primary-hover-bg: var(--product-secondary);
    --button-primary-hover-text: var(--product-text-inverse);
    --button-primary-hover-border: var(--product-secondary);
    --input-bg: var(--product-panel-bg);
    --input-text: var(--product-text);
    --input-border: var(--product-border);
    --input-focus-border: var(--product-primary);
    --input-focus-ring: var(--product-focus-ring);
}