/*
 * irodAI design tokens (v3).
 * Every value reads the matching Elementor Global Color / Font first (Site Settings → Global Colors),
 * so brand changes made in Elementor flow into theme components. Fallbacks = current visual identity.
 */
:root {
  /* Surfaces — matched to React storefront (them/) */
  --ir-page: var(--e-global-color-irodai_page, #F8F1E9);
  --ir-paper: var(--e-global-color-irodai_paper, #FFFDF8);
  --ir-alt: var(--e-global-color-irodai_alt, #F2E8DE);
  --ir-line: var(--e-global-color-irodai_line, #DCCEB9);
  --ir-dark: var(--e-global-color-irodai_dark, #203236);

  /* Text */
  --ir-ink: var(--e-global-color-irodai_ink, #203236);
  --ir-text: var(--e-global-color-irodai_text, #354447);
  --ir-muted: var(--e-global-color-irodai_muted, #74746B);
  --ir-on-dark: #F8F1E9;
  --ir-on-dark-muted: #E5D5C0;

  /* Brand */
  --ir-green: var(--e-global-color-irodai_green, var(--e-global-color-primary, #586447));
  --ir-green-hover: #3E4933;
  --ir-gold: var(--e-global-color-irodai_gold, var(--e-global-color-accent, #D2A653));
  --ir-teal: var(--e-global-color-irodai_teal, #4B573C);
  --ir-navy: var(--e-global-color-irodai_navy, #203236);

  /* Status */
  --ir-ready-bg: #DCE8D4;
  --ir-ready-fg: #2C4527;
  --ir-custom-bg: #D9E4EE;
  --ir-custom-fg: #1F3548;
  --ir-validation-bg: #F5E4BD;
  --ir-validation-fg: #634306;
  --ir-demo-bg: #EFE5D4;
  --ir-demo-fg: #574526;
  --ir-error: #A1261B;
  --ir-error-bg: #FBE9E6;
  --ir-ok: #2C5A27;
  --ir-ok-bg: #E4F0DE;

  /* Type */
  --ir-font: var(--e-global-typography-text-font-family, Vazirmatn), Vazirmatn, system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --ir-fs-xs: .8125rem;
  --ir-fs-sm: .9375rem;
  --ir-fs-md: 1rem;
  --ir-fs-lg: 1.1875rem;
  --ir-fs-xl: clamp(1.45rem, 1.1rem + 1.2vw, 2rem);
  --ir-fs-hero: clamp(1.85rem, 1.2rem + 2.6vw, 3.1rem);
  --ir-lh: 1.9;

  /* Space & shape — sharp corners like the React storefront */
  --ir-wrap: 1180px;
  --ir-gutter: clamp(16px, 4vw, 34px);
  --ir-space-1: 8px;
  --ir-space-2: 12px;
  --ir-space-3: 18px;
  --ir-space-4: 24px;
  --ir-space-5: 36px;
  --ir-space-6: clamp(48px, 6vw, 76px);
  --ir-radius: 12px;
  --ir-radius-sm: 8px;
  --ir-radius-pill: 999px;
  --ir-shadow: 0 12px 40px rgba(32, 50, 54, .07);
  --ir-shadow-green: 0 8px 24px rgba(32, 50, 54, .12);
  --ir-focus: 0 0 0 3px var(--ir-paper), 0 0 0 6px var(--ir-navy);
}