/* =========================================================
   Shared values
   ========================================================= */
:root {
    /* Semantic states */
    --color-danger: #dc3545;
    --color-danger-hover: #bb2d3b;

    --color-success: #198754;
    --color-success-hover: #157347;

    --color-warning: #ffc107;
    --color-warning-hover: #ffca2c;

    --color-secondary: #6c757d;
    --color-secondary-hover: #5c636a;

    /* Status */
    --color-status-inactive: #ff0000;
    --color-status-active: #1c7430;

    /* Generic effects */
    --color-overlay: rgba(0, 0, 0, 0.3);
    --color-overlay-hover: rgba(0, 0, 0, 0.4);
    --color-shadow: rgba(0, 0, 0, 0.05);
    --color-zoom-border: rgba(0, 0, 0, 0.15);
}

/* =========================================================
   Betterday
   ========================================================= */

:root,
.theme-betterday {
    --color-primary: #db0812;
    --color-primary-hover: #b50000;

    /* Admin */
    --color-admin-primary: #007bff;
    --color-admin-primary-hover: #0069d9;

    --font-family-admin: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-weight-admin-body: 400;
    --font-weight-admin-ui: 400;
    --font-weight-admin-heading: 500;

    /* Shop */
    --color-page-background: #ededed;
    --color-surface: #ffffff;

    --color-text: #9d9d9d;
    --color-heading: #000000;
    --color-muted: #777777;
    --color-muted-hover: #cccccc;
    --color-text-inverse: #ffffff;

    --color-border: #e5e5e5;
    --color-border-strong: #a0a09f;
    --color-gallery-border: #ffffff;
    --color-gallery-active: #333333;

    /* Existing Bootstrap-ish admin state */
    --color-control-active: #007bff;
    --color-control-active-border: #005cbf;

    --font-family: "DINNextLTPro";
    --font-weight-body: 300;
    --font-weight-heading: 500;
    --font-weight-ui: 500;
    --font-weight-bold: 700;

    --border-radius: 0;
}


/* =========================================================
   PAYBACK
   ========================================================= */

.theme-payback {
    --color-primary: #003eb0;
    --color-primary-hover: #003eb0;

    /* Admin */
    --color-admin-primary: #003eb0;
    --color-admin-primary-hover: #003eb0;

    --font-family-admin: "PAYBACK", Arial, sans-serif;
    --font-weight-admin-body: 300;
    --font-weight-admin-ui: 400;
    --font-weight-admin-heading: 700;

    /* Shop */
    --color-page-background: #cce6ff;
    --color-surface: #ffffff;

    --color-text: #000000;
    --color-heading: #003eb0;
    --color-muted: #003eb0;
    --color-muted-hover: #003eb0;
    --color-text-inverse: #ffffff;

    --color-border: #cce6ff;
    --color-border-strong: #003eb0;
    --color-gallery-border: #ffffff;
    --color-gallery-active: #003eb0;

    --color-control-active: #003eb0;
    --color-control-active-border: #003eb0;

    --font-family: "PAYBACK";
    --font-weight-body: 300;
    --font-weight-heading: 700;
    --font-weight-ui: 400;
    --font-weight-bold: 700;

    --border-radius: 0;
}


/* =========================================================
   Betterday fonts
   ========================================================= */

@font-face {
    font-family: "DINNextLTPro";
    src: url("../fonts/9949035f-6226-4080-a14a-bf7d94ffb1e1.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DINNextLTPro";
    src: url("../fonts/4bf0ead4-e61b-4992-832b-6ff05828d99f.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DINNextLTPro";
    src: url("../fonts/bc176270-17fa-4c78-a343-9fe52824e501.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   PAYBACK fonts
   ========================================================= */

@font-face {
    font-family: "PAYBACK";
    src: url("../fonts/payback/Payback_Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PAYBACK";
    src: url("../fonts/payback/Payback_Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PAYBACK";
    src: url("../fonts/payback/Payback_Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}