/* ============================================
   Base — Marisou tokens & shared chrome
   ============================================ */

@font-face {
    font-family: "Vazirmatn";
    src: url("https://cdn.snappfood.ir/pwa/assets/fonts/woff2/IRANSansX-Regular.woff2?v2")
        format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --teal-light: #d4eff1;
    --teal-mid: #b4e1e5;
    --teal-bg: #e5f5f6;
    --teal-dark: #8ac5ca;
    --sand: #c7b6a2;
    --sand-light: #d9cdc0;
    --sand-dark: #a89580;
    --white-soft: #f5f0ea;
    --text-dark: #2a2520;
    --text-mid: #4a4035;
    --text-light: #6a5a4a;

    --header-teal-start: #4a9090;
    --header-teal-mid: #5aacac;
    --header-teal-end: #6abcbc;
    --body-overlay-sand: rgba(196, 168, 130, 0.1);
    --body-overlay-teal: rgba(127, 181, 181, 0.15);

    /* Aliases — menu.css / admin.css expect cream/black naming */
    --cream: var(--white-soft);
    --cream-dark: var(--teal-light);
    --cream-darker: var(--sand-light);
    --black: var(--text-dark);
    --black-soft: #3a4545;
    --black-mid: #4a5555;
    --white: #ffffff;
    --nav-gradient: linear-gradient(
        160deg,
        var(--header-teal-start) 0%,
        var(--header-teal-mid) 60%,
        var(--header-teal-end) 100%
    );
    --body-bg: #d6eaea;
    --transition-fast: 0.3s ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Vazirmatn, sans-serif;
    background-color: var(--body-bg);
    line-height: 1.8;
    position: relative;
    overflow-x: hidden;
    color: var(--text-dark);
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 10% 20%, var(--body-overlay-sand) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 80%, var(--body-overlay-teal) 0%, transparent 50%);
    z-index: 0;
    pointer-events: none;
}

:focus-visible {
    outline: 2px solid var(--header-teal-start);
    outline-offset: 2px;
}

/* Shared header chrome (gradient + typography) */
header {
    text-align: center;
    background: linear-gradient(
        160deg,
        var(--header-teal-start) 0%,
        var(--header-teal-mid) 60%,
        var(--header-teal-end) 100%
    );
    color: var(--white-soft);
    box-shadow: 0 6px 24px rgba(74, 144, 144, 0.25);
    position: relative;
    overflow: hidden;
    z-index: 10;
}