/* ============================================
   PASHA SILVER PWA
   DESIGN TOKENS V4
   ============================================ */


/* ============================================
   FONTS
   ============================================ */

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

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


:root {

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

    --bg-body: #ffffff;
    --bg-card: #ffffff;
    --bg-soft: #fafafa;
    --bg-highlight: #fff7ed;

    --color-primary: #ff6a1a;
    --color-primary-dark: #ea580c;
    --color-primary-soft: #fff2e8;

    --text-main: #374151;
    --text-strong: #202124;
    --text-muted: #9ca3af;
    --text-light: #b8bdc5;


    /* ========================================
       PRICES
       ======================================== */

    /* فروش */
    --price-sell: #ca8a04;

    /* خرید */
    --price-buy: #9f9f9f;

    /* ساچمه */
    --price-shot: #666b73;

    /* انس */
    --price-ounce: #ca8a04;


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

    --status-online: #22c55e;
    --status-offline: #ef4444;

    --sale-closed-bg: #fff1f2;
    --sale-closed-text: #e11d48;
    --sale-closed-border: #fecdd3;


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

    --border-light: #f0f1f3;
    --border-medium: #e5e7eb;


    /* ========================================
       SHADOW
       ======================================== */

    --shadow-sm:
        0 1px 3px rgba(0, 0, 0, 0.04);

    --shadow-card:
        0 4px 18px rgba(0, 0, 0, 0.035);


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

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius: 16px;
    --radius-lg: 20px;


    /* ========================================
       FONTS
       ======================================== */

    --font-main:
        "Vazirmatn",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;


    /* ========================================
       LAYOUT
       ======================================== */

    --page-max-width: 520px;

    --page-padding:
        clamp(10px, 3.5vw, 18px);

    --section-gap:
        clamp(12px, 3vw, 18px);


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

    --price-font-size:
        clamp(14px, 4.1vw, 19px);

    --price-font-weight: 700;

    --weight-font-size:
        clamp(12px, 3.6vw, 16px);

}