/* =============================================================================
 * Rahkar — Design Tokens  (Phase 1.2)
 * -----------------------------------------------------------------------------
 * Single source of truth for the visual layer, translated 1:1 from the WP
 * theme's theme.json so the ported component CSS (header.css, product-card.css,
 * product-single.css, ...) drops in UNCHANGED.
 *
 * The variable NAMES are deliberately the exact strings WordPress generates
 * from theme.json (--wp--preset--*, --wp--custom--*, --wp--style--*). The
 * ported component CSS references these names verbatim — DO NOT rename them.
 *
 * Source: C:\Users\2\Local Sites\rahkar-theme\...\rahkartheme\theme.json
 * Anything changed here changes the whole theme; treat as the design contract.
 * ========================================================================== */

:root {

  /* ---- Color palette (theme.json settings.color.palette) ----------------- */
  /* Sage palette («فلدگرو عمیق», approved from the client's Alabaster → Feldgrau
     swatch). Off-white canvas, near-black text, deep Feldgrau brand.
     Button labels sit on primary in the BASE colour, so primary must stay dark
     enough for light text (#3E4B41 on #FAFAF8 ≈ 9:1). */
  --wp--preset--color--base: #FAFAF8;
  --wp--preset--color--surface: #F0F2ED;
  --wp--preset--color--muted: #E4E8E0;
  --wp--preset--color--border: #DDE1D7;
  --wp--preset--color--contrast: #000000;
  --wp--preset--color--text: #111111;
  --wp--preset--color--text-muted: #4E5A51;
  --wp--preset--color--primary: #3E4B41;
  --wp--preset--color--primary-dark: #2F3A32;
  --wp--preset--color--secondary: #D8E0D3;
  --wp--preset--color--accent: #A4442F;
  --wp--preset--color--success: #198754;
  --wp--preset--color--warning: #d97706;
  --wp--preset--color--danger: #dc2626;
  /* primary-soft: referenced by wc-account.css (Phase 7) but not in the
     theme.json palette. A light tint of primary, used for hover borders and
     focus-ring glows — aliased to secondary (pale Alabaster). */
  --wp--preset--color--primary-soft: var(--wp--preset--color--secondary);

  /* ---- Campaign («اسلایدر تخفیف‌ها») ---------------------------------------
     The deals band is deliberately the LOUDEST thing on the homepage — it has
     to read as a limited-time event next to an otherwise quiet, light palette.
     Kept as tokens so a shop can retune the campaign look in one place without
     touching products-slider.css / product-card.css.
       deals-accent  — the ribbon printed on each campaign card
       deals-clock-* — the countdown pill (dark chip, amber digits) */
  --rh-deals-accent: #3E4B41;
  --rh-deals-accent-soft: #E4E8E0;
  --rh-deals-clock-bg: #3E4B41;
  --rh-deals-clock-fg: #F2F4EF;

  /* ---- Spacing scale (theme.json settings.spacing.spacingScale) ----------
     operator "*", increment 1.5, 7 steps, mediumStep 1.5rem (slug 50).
     Identical to WordPress' generated preset values. */
  --wp--preset--spacing--20: 0.44rem;
  --wp--preset--spacing--30: 0.67rem;
  --wp--preset--spacing--40: 1rem;
  --wp--preset--spacing--50: 1.5rem;
  --wp--preset--spacing--60: 2.25rem;
  --wp--preset--spacing--70: 3.38rem;
  --wp--preset--spacing--80: 5.06rem;

  /* ---- Font families (theme.json settings.typography.fontFamilies) -------- */
  /* THE site font. IRANYekanX Variable, self-hosted (see the @font-face in
     global.css). Vazirmatn stays in the stack as the first fallback — it is
     still hosted, so if IRANYekanX ever fails to load the page falls back to
     another proper Persian face rather than to Tahoma. */
  --wp--preset--font-family--iranyekanx: 'IRANYekanX', 'Vazirmatn', system-ui, -apple-system, Segoe UI, Tahoma, Arial, sans-serif;
  /* Kept as aliases so any rule (or third-party override) still written
     against an old name keeps resolving to whatever the site font is now. */
  --wp--preset--font-family--lahzeh: var(--wp--preset--font-family--iranyekanx);
  --wp--preset--font-family--vazirmatn: var(--wp--preset--font-family--iranyekanx);
  --wp--preset--font-family--system: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --wp--preset--font-family--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  /* ---- Font-weight scale (Zara-style light typography) --------------------
     Vazirmatn is a variable font (100–900, see global.css @font-face), so a
     lighter, airier weight ladder costs nothing extra to ship. The whole UI is
     remapped onto these four tokens — tune the look from HERE, not per-file:
       base    300  body + most text (Vazirmatn 300 stays readable in Persian)
       strong  400  emphasis: prices, buttons, key labels (was 600/700/800)
       heading 300  headings — airy, size carries the hierarchy
       display 200  optional huge hero text only (set manually; 100 = use with care)
     Component CSS that hardcoded 800/700/600 now points at --rh-fw-strong;
     500/400 now points at --rh-fw-base. Persian script gets unreadable below
     ~200, so we never default anything below 300. */
  --rh-fw-base: 300;
  --rh-fw-strong: 400;
  --rh-fw-heading: 300;
  --rh-fw-display: 200;
  --rh-fw-light: 200;

  /* ---- Icon stroke (Zara-style thin line icons) --------------------------
     All UI icons are inline <svg ... stroke="currentColor"> on a 24-unit
     viewBox. A single CSS rule in global.css forces this stroke-width onto all
     of them (CSS property beats the inline stroke-width attribute), so icons go
     uniformly thin without editing each SVG. Was a mix of 2 / 1.8 / 2.5. */
  --rh-icon-stroke: 1.5;

  /* ---- Product photo ratio ----------------------------------------------
     THE shape of every product-image slot in the theme (card media, gallery
     viewport, thumbs, upsell/wishlist tiles, the loading skeleton and the
     mobile gallery mosaic). It is a plain NUMBER = width / height, so it works
     both as `aspect-ratio: var(--rh-product-ratio)` and inside calc().

     Why 0.8 and not 1: this shop's photos are PORTRAIT, not square. PrestaShop
     runs with PS_IMAGE_GENERATION_METHOD = 1 (fixed width, height follows the
     source), so every generated thumbnail keeps the photographer's ratio — the
     square numbers in «Image settings» (340×340, 531×531 …) are only bounding
     boxes. Measured on disk: 19 of the 22 real cover images are exactly 4:5
     (531×664); the rest sit between 3:4 and 1:1.

     So the slots are shaped 4:5 to match the photos instead of cropping them.
     Change this ONE value if the shop's photography ratio ever changes — every
     product slot in the theme follows. */
  --rh-product-ratio: 0.8;   /* 4 / 5 — portrait */

  /* ---- Font sizes (theme.json settings.typography.fontSizes) -------------
     fluid:false -> fixed; fluid:{min,max} -> clamp() reproducing WP's fluid
     typography formula (viewport 320px–1600px, slope rounded to 4 dp). */
  --wp--preset--font-size--xs: 0.75rem;
  --wp--preset--font-size--sm: 0.875rem;
  --wp--preset--font-size--base: 1rem;
  --wp--preset--font-size--md: clamp(1rem, calc(0.9688rem + 0.1563vw), 1.125rem);
  --wp--preset--font-size--lg: clamp(1.125rem, calc(1.0938rem + 0.1563vw), 1.25rem);
  --wp--preset--font-size--xl: clamp(1.25rem, calc(1.1875rem + 0.3125vw), 1.5rem);
  --wp--preset--font-size--2xl: clamp(1.5rem, calc(1.4063rem + 0.4688vw), 1.875rem);
  --wp--preset--font-size--3xl: clamp(1.75rem, calc(1.625rem + 0.625vw), 2.25rem);
  --wp--preset--font-size--4xl: clamp(2rem, calc(1.75rem + 1.25vw), 3rem);
  --wp--preset--font-size--5xl: clamp(2.5rem, calc(2.1875rem + 1.5625vw), 3.75rem);

  /* ---- Shadows (theme.json settings.shadow.presets) ----------------------- */
  --wp--preset--shadow--xs: 0 1px 2px rgba(15, 17, 21, 0.06);
  --wp--preset--shadow--sm: 0 2px 6px rgba(15, 17, 21, 0.08);
  --wp--preset--shadow--md: 0 8px 24px rgba(15, 17, 21, 0.10);
  --wp--preset--shadow--lg: 0 16px 40px rgba(15, 17, 21, 0.14);

  /* ---- Custom tokens (theme.json settings.custom; nesting -> "--") -------- */
  --wp--custom--radius--sm: 0.25rem;
  --wp--custom--radius--md: 0.5rem;
  --wp--custom--radius--lg: 0.75rem;
  --wp--custom--radius--xl: 1rem;
  --wp--custom--radius--pill: 9999px;

  --wp--custom--button--h--sm: 36px;
  --wp--custom--button--h--md: 44px;
  --wp--custom--button--h--lg: 52px;
  --wp--custom--button--px--sm: 14px;
  --wp--custom--button--px--md: 20px;
  --wp--custom--button--px--lg: 22px;
  --wp--custom--button--fs--sm: 0.875rem;
  --wp--custom--button--fs--md: 0.9375rem;
  --wp--custom--button--fs--lg: 1rem;
  --wp--custom--button--fw: var(--rh-fw-strong);
  --wp--custom--button--radius: 10px;
  --wp--custom--button--gap: 8px;

  --wp--custom--direction: rtl;

  /* ---- Layout globals (theme.json settings.layout + styles padding) ------- */
  --wp--style--global--content-size: 760px;
  /* Site-wide max content width — drives the header rows (.rh-row__inner), the
     funnel header, the footer inner, the home inner, and the page content
     .container (see global.css). Caps at 1676px on big screens; below that the
     container is fluid (full width) with the --rh-gutter side padding. */
  --wp--style--global--wide-size: 1676px;
  /* Shared inline gutter so the page content lines up with the header — the
     header's .rh-row__inner uses the same clamp via #header's --rh-pad-x. */
  --rh-gutter: clamp(12px, 3vw, 28px);
  --wp--style--root--padding-left: var(--wp--preset--spacing--40);
  --wp--style--root--padding-right: var(--wp--preset--spacing--40);
}

/* RAHKAR_FULL_WIDTH admin toggle (AdminRahkarTheme) — desktop only, per the
   owner. Redefining the custom property here is enough for the WHOLE site:
   every container that caps on --wp--style--global--wide-size (header rows,
   footer inner, home inner, #wrapper>.container in global.css, …) already
   reads it live via var(), so `none` removes every one of those caps at once
   with zero changes to the files that consume it. */
@media (min-width: 901px) {
  body.rh-full-width {
    --wp--style--global--wide-size: none !important;
  }
}