/* =========================================================
   VARKA SWEETS & BAKERS
   GLOBAL VARIABLES
   Premium Unified Design System
========================================================= */


/* =========================================================
   GLOBAL DESIGN TOKENS
========================================================= */

:root {

    /* =====================================================
       GLOBAL BACKGROUND
    ===================================================== */

    --cream: #fbf6ed;
    --ivory: #fffdf8;

    --account-bg: #f7f7f5;
    --cart-bg: #fcf9f6;
    --checkout-bg: #fcf8f5;
    --auth-bg: #f7f5f2;

    --account-card: #ffffff;
    --cart-card: #ffffff;
    --checkout-card: #ffffff;
    --auth-white: #ffffff;

    --white: #ffffff;


    /* =====================================================
       PRIMARY BRAND
    ===================================================== */

    --burgundy: #7e1824;
    --deep-burgundy: #58111a;

    --varka-primary: #8b1830;
    --varka-primary-dark: #651024;
    --varka-primary-light: #b52d49;

    --cart-accent: #a52f3f;
    --cart-accent-dark: #842535;

    --checkout-primary: #b84b2b;
    --checkout-primary-dark: #8f351f;

    --auth-gold: #a86b32;
    --auth-gold-dark: #8e5727;

    --account-accent: #a86b32;


    /* =====================================================
       GOLD / PREMIUM ACCENTS
    ===================================================== */

    --gold: #c9a45c;
    --soft-gold: #e8d4a8;

    --varka-gold: #c99a3e;
    --varka-gold-light: #e6c477;

    --cart-gold: #b56a32;


    /* =====================================================
       SOFT BRAND BACKGROUNDS
    ===================================================== */

    --varka-cream: #fffaf3;
    --varka-soft: #f8f3ec;

    --cart-soft: #fff8f4;

    --checkout-primary-soft: #fff3ed;

    --account-accent-soft: #f7eee5;


    /* =====================================================
       TEXT COLORS
    ===================================================== */

    --dark: #24201d;

    --account-text: #171717;
    --cart-text: #2f2522;
    --checkout-text: #30221e;
    --auth-text: #202020;

    --varka-text: #241b1d;

    --account-dark: #181818;
    --auth-dark: #171717;


    /* =====================================================
       SECONDARY / MUTED TEXT
    ===================================================== */

    --muted: #756b61;

    --account-muted: #737373;

    --cart-muted: #786c67;
    --cart-light-text: #9a8e88;

    --checkout-text-soft: #6f5e57;
    --checkout-text-muted: #94827a;

    --varka-text-soft: #74696b;
    --varka-muted: #9b9191;

    --auth-muted: #737373;


    /* =====================================================
       BORDER COLORS
    ===================================================== */

    --border: rgba(126, 24, 36, .12);

    --account-border: #e9e9e7;

    --cart-border: #eadbd3;
    --cart-border-light: #f1e5df;

    --checkout-border: #eadbd3;
    --checkout-border-soft: #f1e7e2;

    --auth-border: #e7e3df;
    --auth-border-focus: #c89462;

    --varka-border: #eadfd5;


    /* =====================================================
       STATUS COLORS
    ===================================================== */

    --varka-success: #238b5b;
    --varka-danger: #b42335;

    --checkout-green: #277653;

    --auth-error-bg: #fff0f0;
    --auth-error-border: #ffd4d1;
    --auth-error-text: #b42318;

    --auth-success-bg: #eefaf2;
    --auth-success-border: #ccebd7;
    --auth-success-text: #217a42;


    /* =====================================================
       SHADOWS
    ===================================================== */

    --shadow:
        0 18px 50px
        rgba(50, 25, 15, .08);

    --account-shadow:
        0 18px 55px
        rgba(20, 20, 20, .07);

    --cart-shadow:
        0 18px 55px
        rgba(72, 39, 27, .08);

    --checkout-shadow:
        0 18px 55px
        rgba(57, 35, 25, .075);

    --product-shadow:
        0 24px 70px
        rgba(61, 29, 30, .09);

    --product-shadow-soft:
        0 12px 35px
        rgba(61, 29, 30, .07);

    --auth-shadow:
        0 25px 70px
        rgba(30, 20, 10, .10);


    /* =====================================================
       RADIUS SYSTEM
    ===================================================== */

    --radius: 22px;

    --account-radius: 20px;

    --cart-radius: 24px;

    --checkout-radius: 24px;

    --auth-radius: 24px;

    --product-radius-xl: 28px;
    --product-radius-lg: 20px;
    --product-radius-md: 14px;


    /* =====================================================
       TYPOGRAPHY
    ===================================================== */

    --font-main:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    --font-sans:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    --auth-sans:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    --auth-serif:
        "Playfair Display",
        Georgia,
        "Times New Roman",
        serif;


    /* =====================================================
       PRODUCT TRANSITION
    ===================================================== */

    --product-transition:
        .28s cubic-bezier(.2, .8, .2, 1);


    /* =====================================================
       COMMON CONTAINER
    ===================================================== */

    --container-width: 1380px;

    --container-padding: 48px;


    /* =====================================================
       Z-INDEX SYSTEM
    ===================================================== */

    --z-base: 1;

    --z-dropdown: 100;

    --z-sticky: 500;

    --z-header: 1000;

    --z-overlay: 2000;

    --z-modal: 3000;

    --z-toast: 4000;
}



/* =========================================================
   GLOBAL BOX MODEL
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* =========================================================
   HTML
========================================================= */

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}


/* =========================================================
   BODY
========================================================= */

body {
    margin: 0;

    min-height: 100vh;

    color: var(--dark);

    font-family: var(--font-main);

    background: var(--ivory);

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    overflow-x: hidden;
}


/* =========================================================
   LINKS
========================================================= */

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   BUTTONS / INPUTS
========================================================= */

button,
input,
textarea,
select {
    font: inherit;
}


/* =========================================================
   BUTTON
========================================================= */

button {
    cursor: pointer;
}


/* =========================================================
   IMAGES
========================================================= */

img {
    display: block;
    max-width: 100%;
}


/* =========================================================
   FORMS
========================================================= */

input,
textarea,
select {
    outline: none;
}


/* =========================================================
   GLOBAL CONTAINER
========================================================= */

.container {
    width: min(
        var(--container-width),
        calc(100% - var(--container-padding))
    );

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(168, 107, 50, .22);
    outline-offset: 3px;
}


/* =========================================================
   SELECTION
========================================================= */

::selection {
    background: rgba(126, 24, 36, .16);
    color: var(--dark);
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: #f4eee8;
}

::-webkit-scrollbar-thumb {
    background: #c9b4a3;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a98c77;
}