/* =========================================================
   اکسسوری ریحان — Luxury Typography System
   Local fonts only · Premium · Calm · Boutique
   ========================================================= */

/* ---------- @font-face · Display (Brand) ---------- */
@font-face {
  font-family: 'Markazi Text';
  src: url('../fonts/MarkaziText-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Markazi Text';
  src: url('../fonts/MarkaziText-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Markazi Text';
  src: url('../fonts/MarkaziText-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Markazi Text';
  src: url('../fonts/MarkaziText-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- UI / Product (Secondary) ---------- */
@font-face {
  font-family: 'Peyda';
  src: url('../fonts/Peyda.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans Arabic';
  src: url('../fonts/NotoSansArabic-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans Arabic Condensed';
  src: url('../fonts/NotoSansArabic_Condensed-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Arabic Condensed';
  src: url('../fonts/NotoSansArabic_Condensed-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Arabic Condensed';
  src: url('../fonts/NotoSansArabic_Condensed-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Arabic Condensed';
  src: url('../fonts/NotoSansArabic_Condensed-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reading (Body) ---------- */
@font-face {
  font-family: 'Vazir';
  src: url('../fonts/Vazir-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazir';
  src: url('../fonts/Vazir-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazir';
  src: url('../fonts/Vazir.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazir';
  src: url('../fonts/Vazir-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazir';
  src: url('../fonts/Vazir-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Special / Accent ---------- */
@font-face {
  font-family: 'Lalezar';
  src: url('../fonts/Lalezar.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* Stacks */
  --font-display: 'Markazi Text', 'Peyda', Tahoma, serif;
  --font-ui: 'Peyda', 'Noto Sans Arabic', 'Vazir', Tahoma, sans-serif;
  --font-body: 'Vazir', 'Noto Sans Arabic', Tahoma, sans-serif;
  --font-price: 'Noto Sans Arabic Condensed', 'Noto Sans Arabic', 'Vazir', Tahoma, sans-serif;
  --font-accent: 'Lalezar', 'Markazi Text', Tahoma, sans-serif;

  /* Legacy alias used across stylesheets */
  --font: var(--font-body);

  /* Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Tracking (Persian: keep subtle) */
  --track-tight: -0.01em;
  --track-normal: 0;
  --track-display: 0.02em;
  --track-brand: 0.08em;
  --track-price: 0.01em;
  --track-badge: 0.04em;

  /* Leading */
  --lh-display: 1.25;
  --lh-ui: 1.45;
  --lh-body: 1.85;
  --lh-price: 1.2;

  /* Desktop type scale */
  --fs-hero: clamp(2.25rem, 3.2vw, 3.25rem);   /* ~36–52 */
  --fs-h1: clamp(1.875rem, 2.4vw, 2.5rem);     /* ~30–40 */
  --fs-h2: clamp(1.5rem, 1.9vw, 2rem);         /* ~24–32 */
  --fs-h3: 1.25rem;                              /* 20 */
  --fs-h4: 1.125rem;                             /* 18 */
  --fs-body: 1rem;                               /* 16 */
  --fs-body-sm: 0.9375rem;                       /* 15 */
  --fs-caption: 0.8125rem;                       /* 13 */
  --fs-price: 1.125rem;                          /* 18 */
  --fs-price-lg: 1.375rem;                       /* 22 */
  --fs-badge: 0.75rem;                           /* 12 */
  --fs-nav: 0.875rem;                            /* 14 */
  --fs-btn: 0.9375rem;                           /* 15 */
  --fs-quote: clamp(1.35rem, 2vw, 1.75rem);      /* ~22–28 */
  --fs-promo: clamp(1.5rem, 2.4vw, 2.125rem);    /* ~24–34 */
}

@media (max-width: 767px) {
  :root {
    --fs-hero: 1.875rem;   /* 30 */
    --fs-h1: 1.625rem;     /* 26 */
    --fs-h2: 1.375rem;     /* 22 */
    --fs-h3: 1.125rem;     /* 18 */
    --fs-h4: 1.0625rem;    /* 17 */
    --fs-body: 0.9375rem;  /* 15 */
    --fs-body-sm: 0.875rem;/* 14 */
    --fs-price: 1.0625rem; /* 17 */
    --fs-price-lg: 1.25rem;/* 20 */
    --fs-nav: 0.8125rem;   /* 13 */
    --fs-btn: 0.875rem;    /* 14 */
    --fs-quote: 1.25rem;   /* 20 */
    --fs-promo: 1.375rem;  /* 22 */
  }
}

/* ---------- Base ---------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-normal);
}

/* ---------- Display / Brand ---------- */
.font-display,
.dk-logo__text,
.hero-title-mobile,
.hero-title-desktop,
.hero-kicker,
.section-title,
.landing-intro h1,
.landing-intro h2,
.story-block h2,
.cta-band h2,
h1.page-title,
.product-detail h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
}

.dk-logo__text {
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-brand);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
}

.hero-title-mobile,
.hero-title-desktop {
  font-size: var(--fs-hero);
  font-weight: var(--fw-semibold);
}

.section-title,
.landing-intro h2,
.story-block h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
}

h1, .h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-semibold); line-height: var(--lh-display); }
h2, .h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-medium); line-height: var(--lh-display); }
h3, .h3 { font-family: var(--font-ui); font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-ui); }

/* ---------- UI / Commerce ---------- */
.font-ui,
.dk-nav__links a,
.dk-nav__cats,
.dk-header__link,
.bnav-item span,
.drawer-nav a,
.btn,
.hero-btn,
button[type="submit"],
.pcard-title,
.pcard-cat,
.cat-label,
.cat-card__name,
.shop-filters,
.account-tabs a {
  font-family: var(--font-ui);
  letter-spacing: var(--track-normal);
  line-height: var(--lh-ui);
}

.dk-nav__links a,
.dk-nav__cats {
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
}

.pcard-title,
.pcard-title a {
  font-family: var(--font-ui);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}

.btn,
.hero-btn,
button[type="submit"] {
  font-size: var(--fs-btn);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
}

/* ---------- Reading ---------- */
.font-body,
.product-desc,
.product-detail .desc,
.review-text,
.landing-intro p,
.story-block p,
.faq-item p,
.checkout-form,
.form-group,
.page p,
.about-content,
.dk-footer p {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.landing-intro p,
.story-block p {
  font-weight: var(--fw-light);
  font-size: var(--fs-body-sm);
  color: var(--text-2, #7A6E62);
}

/* ---------- Prices / Badges / Promo ---------- */
.font-price,
.price-current,
.price-old,
.pcard-price,
.cart-line-price,
.order-total,
.checkout-totals {
  font-family: var(--font-price);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-price);
  line-height: var(--lh-price);
  font-variant-numeric: tabular-nums;
}

.price-current {
  font-size: var(--fs-price);
}

.price-old {
  font-weight: var(--fw-regular);
  font-size: var(--fs-caption);
}

.pcard-badge,
.badge,
.discount,
.tag-sale {
  font-family: var(--font-price);
  font-size: var(--fs-badge);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-badge);
  line-height: 1.2;
}

.font-quote,
.review-quote,
blockquote,
.soft-quote {
  font-family: var(--font-display);
  font-size: var(--fs-quote);
  font-weight: var(--fw-regular);
  letter-spacing: var(--track-display);
  line-height: 1.55;
}

.font-promo,
.top-banner,
.promo-banner,
.cta-band h2 {
  font-family: var(--font-accent);
  font-size: var(--fs-promo);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.top-banner {
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
}

/* Announcement stays calm UI; true promo moments use .font-promo */
.cta-band h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
}

/* Utility helpers */
.tracking-brand { letter-spacing: var(--track-brand); }
.tracking-display { letter-spacing: var(--track-display); }
.text-light { font-weight: var(--fw-light); }
.text-medium { font-weight: var(--fw-medium); }
.text-semibold { font-weight: var(--fw-semibold); }