/* =============================================================================
 * 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) ----------------- */
  --wp--preset--color--base: #ffffff;
  --wp--preset--color--surface: #f7f7f8;
  --wp--preset--color--muted: #eceef1;
  --wp--preset--color--border: #e2e4e9;
  --wp--preset--color--contrast: #0f1115;
  --wp--preset--color--text: #1a1d23;
  --wp--preset--color--text-muted: #5b6271;
  --wp--preset--color--primary: #6dbdba;
  --wp--preset--color--primary-dark: #4f9b98;
  --wp--preset--color--accent: #e63946;
  --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. Matches the inline fallback already in that CSS
     (var(--...--primary-soft,#d8e6f5)) — a light tint of primary. */
  --wp--preset--color--primary-soft: #e0f2f1;

  /* ---- 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) -------- */
  --wp--preset--font-family--vazirmatn: 'Vazirmatn', system-ui, -apple-system, Segoe UI, Tahoma, Arial, sans-serif;
  --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;

  /* ---- 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);
}