/*
 * tokens.css — THE SINGLE DESIGN-TOKEN SOURCE (TIS §2.5 / ADR-001 R-A3).
 *
 * Every --mi-* custom property below carries a value FROZEN in the design-system foundations
 * and the Component Library (mockups/assets/mi.css). No value changes here — this file only
 * renames them to the canonical --mi-* convention. The Elementor Global Kit MIRRORS this file;
 * never edit the Kit as a second source (governance: edit tokens.css, then reflect in the Kit).
 *
 * Widgets/templates reference var(--mi-…) ONLY — a raw hex/px in a widget is a defect (R-A3).
 * Bind markup to SEMANTIC vars (e.g. --mi-color-action-buy), not primitives, so a re-theme swaps
 * primitives under stable names.
 */

/* Self-hosted variable font (never a CDN). Preloaded by inc/preload.php. */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2-variations"),
       url("../fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Color primitives ---- */
  --mi-color-navy-900: #102134;
  --mi-color-navy-800: #112250;
  --mi-color-navy-700: #1a293f;
  --mi-color-slate-600: #404751;
  --mi-color-sapphire-500: #3c507d;
  --mi-color-gold-500: #896f3d;
  --mi-color-gold-300: #e0c58f;
  --mi-color-accessible-gold: #7f6220;
  --mi-color-ivory-50: #f5f0e9;
  --mi-color-sand-200: #d9cbc2;
  --mi-color-clay-error: #b4402e;
  --mi-color-signal-success: #2e7d5b;
  --mi-color-signal-warning: #c58a2e;
  --mi-color-white-pure: #fff;
  --mi-color-n-100: #ece4da;
  --mi-color-n-300: #c0b2a6;
  --mi-color-n-500: #6e6a66;
  --mi-color-n-700: #2c3a4c;
  --mi-color-n-800: #1b2b3e;

  /* ---- Color semantics (reference primitives — bind markup to these) ---- */
  --mi-color-bg-base: var(--mi-color-ivory-50);
  --mi-color-bg-elevated: var(--mi-color-white-pure);
  --mi-color-bg-sunken: var(--mi-color-n-100);
  --mi-color-text-primary: var(--mi-color-navy-900);
  --mi-color-text-secondary: var(--mi-color-slate-600);
  --mi-color-text-tertiary: var(--mi-color-n-500);
  --mi-color-text-on-dark: var(--mi-color-ivory-50);
  --mi-color-text-gold: var(--mi-color-accessible-gold);
  --mi-color-brand-primary: var(--mi-color-navy-800);
  --mi-color-brand-accent: var(--mi-color-gold-500);
  --mi-color-action-lead-magnet: var(--mi-color-gold-500); /* §3.2 gift = gold */
  --mi-color-action-buy: var(--mi-color-navy-800);         /* §3.2 buy  = navy */
  --mi-color-link: var(--mi-color-sapphire-500);
  --mi-color-border: var(--mi-color-sand-200);
  --mi-color-border-strong: var(--mi-color-n-300);

  /* ---- Typography ---- */
  --mi-font-sans: "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;
  --mi-font-logo: "Georgia", "Times New Roman", serif; /* Latin wordmark only */
  --mi-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; /* Latin machine strings only */

  --mi-font-size-overline: 0.75rem;
  --mi-font-size-caption: 0.8125rem;
  --mi-font-size-body-sm: 0.875rem;
  --mi-font-size-body: 1rem;
  --mi-font-size-body-lg: 1.125rem;
  --mi-font-size-h4: 1.125rem;
  --mi-font-size-h3: 1.25rem;
  --mi-font-size-h2: 1.75rem;
  --mi-font-size-h1: 2.25rem;
  --mi-font-size-display: 2.5rem;
  --mi-font-size-display-lg: 3rem;

  --mi-type-line-height-tight: 1.2;
  --mi-type-line-height-snug: 1.25;
  --mi-type-line-height-base: 1.6;
  --mi-type-line-height-relaxed: 1.8;

  --mi-type-weight-300: 300;
  --mi-type-weight-400: 400;
  --mi-type-weight-500: 500;
  --mi-type-weight-600: 600;
  --mi-type-weight-700: 700;

  --mi-type-letter-spacing-tight: -0.01em;
  --mi-type-letter-spacing-normal: 0;
  --mi-type-letter-spacing-overline: 0.04em;

  /* ---- Spacing (4px base / 8pt scale) ---- */
  --mi-space-1: 4px;
  --mi-space-2: 8px;
  --mi-space-3: 12px;
  --mi-space-4: 16px;
  --mi-space-5: 20px;
  --mi-space-6: 24px;
  --mi-space-8: 32px;
  --mi-space-10: 40px;
  --mi-space-12: 48px;
  --mi-space-16: 64px;
  --mi-space-20: 80px;
  --mi-space-24: 96px;

  /* ---- Grid / container ---- */
  --mi-grid-columns: 12;
  --mi-grid-gutter: var(--mi-space-6);
  --mi-container-content: 720px;
  --mi-container-wide: 1280px;
  --mi-container-padding-inline: clamp(16px, 4vw, 40px);

  /* ---- Radius ---- */
  --mi-radius-none: 0;
  --mi-radius-sm: 4px;
  --mi-radius-md: 8px;
  --mi-radius-lg: 12px;
  --mi-radius-xl: 16px;
  --mi-radius-2xl: 24px;
  --mi-radius-pill: 999px;

  /* ---- Shadow (navy-tinted) ---- */
  --mi-shadow-e0: none;
  --mi-shadow-e1: 0 1px 2px rgba(16, 33, 52, 0.06);
  --mi-shadow-e2: 0 4px 12px rgba(16, 33, 52, 0.08);
  --mi-shadow-e3: 0 8px 24px rgba(16, 33, 52, 0.1);
  --mi-shadow-e4: 0 16px 40px rgba(16, 33, 52, 0.14);
  --mi-shadow-e5: 0 24px 64px rgba(16, 33, 52, 0.18);

  /* ---- Z-index ladder ---- */
  --mi-z-base: 0;
  --mi-z-dropdown: 1000;
  --mi-z-sticky-header: 1100;
  --mi-z-buybar: 1100;
  --mi-z-floating-chat: 1150;
  --mi-z-popover: 1200;
  --mi-z-modal-overlay: 1300;
  --mi-z-modal: 1310;
  --mi-z-wheel-modal: 1350;
  --mi-z-toast: 1400;

  /* ---- Motion ---- */
  --mi-motion-duration-120: 120ms;
  --mi-motion-duration-200: 200ms;
  --mi-motion-duration-300: 300ms;
  --mi-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --mi-ease-entrance: cubic-bezier(0, 0, 0, 1);
  --mi-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* ---- Breakpoints (mirrored into Elementor custom breakpoints, inc/breakpoints.php) ---- */
  --mi-breakpoint-xs: 0;
  --mi-breakpoint-sm: 480px;
  --mi-breakpoint-md: 768px;
  --mi-breakpoint-lg: 1024px;
  --mi-breakpoint-xl: 1280px;
  --mi-breakpoint-2xl: 1536px;

  /* ---- Icon sizes / media ratios (were theme.json settings.custom; now --mi-* per ADR-001 map, TIS §1.7) ---- */
  --mi-icon-size-sm: 16px;
  --mi-icon-size-md: 20px;
  --mi-icon-size-lg: 24px;
  --mi-icon-size-xl: 28px;
  --mi-media-ratio-square: 1 / 1;
  --mi-media-ratio-portrait: 3 / 4;
  --mi-media-ratio-landscape: 16 / 9;
  --mi-media-ratio-product: 4 / 5;
}

/*
 * Dark mode — [Derived, OPTIONAL] alternate --mi-* value set (TIS §2.5.3). Go/no-go is 📝 OPEN
 * (spec is silent on dark mode). Only the semantic vars flip; no Elementor duplication.
 * Kept commented until the go/no-go decision so it never activates unexpectedly.
 */
/*
:root[data-theme="dark"] {
  --mi-color-bg-base: #0b1826;
  --mi-color-bg-elevated: #10263c;
  --mi-color-text-primary: var(--mi-color-ivory-50);
  --mi-color-text-secondary: var(--mi-color-sand-200);
  --mi-color-text-gold: var(--mi-color-gold-300);
  --mi-color-border: rgba(217, 203, 194, 0.18);
}
*/