/* ============================================================
   ری‌پلای (Re-ply) — Design tokens, Persian-first build
   Single type family: Vazirmatn (variable woff2, Arabic + Latin
   subsets of the same Persian family — no Latin brand font).
   Palette / spacing / shadows come from the Re-ply design system.
   ============================================================ */

@font-face {
  font-family: 'Vazirmatn';
  src: url('../assets/fonts/Vazirmatn-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2212;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../assets/fonts/Vazirmatn-Latin-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2074, U+20AC, U+2122;
}

:root {
  /* ---- Base neutrals (ink → white) ---- */
  --ink-950: #14121f;
  --ink-900: #1b1830;
  --ink-800: #262246;
  --ink-700: #392f5e;
  --ink-600: #554a7a;
  --ink-500: #756a97;
  --ink-400: #9a90b5;
  --ink-300: #c1bad4;
  --ink-200: #e0dceb;
  --ink-100: #f0edf6;
  --ink-50:  #f8f6fb;
  --white:   #ffffff;

  /* ---- Primary — Indigo/Violet ---- */
  --violet-900: #2c1a66;
  --violet-800: #3c239b;
  --violet-700: #4c2ec7;
  --violet-600: #5b3ce8;
  --violet-500: #6f52f5;
  --violet-400: #8b73f7;
  --violet-300: #ac9bfa;
  --violet-200: #cdc2fc;
  --violet-100: #e7e0fd;
  --violet-50:  #f4f1fe;

  /* ---- Secondary — Coral/Pink (live · capture) ---- */
  --coral-900: #7a1f3d;
  --coral-800: #9c2850;
  --coral-700: #c53467;
  --coral-600: #e8437f;
  --coral-500: #f65b90;
  --coral-400: #fa7fa8;
  --coral-300: #fca6c1;
  --coral-200: #fdcbdc;
  --coral-100: #ffe4ee;
  --coral-50:  #fff3f8;

  /* ---- Success — Green ---- */
  --green-800: #146237;
  --green-600: #1fa055;
  --green-500: #2bb867;
  --green-100: #e2f7ea;
  --green-50:  #f2fbf6;

  /* ---- Warning / Danger ---- */
  --amber-600: #b4740e;
  --amber-500: #dc9414;
  --amber-50:  #fdf6e8;
  --red-600: #c0293f;
  --red-500: #e13a52;
  --red-50:  #fdf0f1;

  /* ---- Semantic aliases ---- */
  --surface-page:    var(--ink-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--ink-100);
  --surface-inverse: var(--ink-950);
  --surface-overlay: rgba(20, 18, 31, 0.48);

  --text-primary:   var(--ink-950);
  --text-secondary: var(--ink-600);
  --text-tertiary:  var(--ink-400);
  --text-inverse:   var(--white);
  --text-link:      var(--violet-600);

  --border-subtle:  var(--ink-200);
  --border-default: var(--ink-300);
  --border-focus:   var(--violet-500);

  --brand-primary:        var(--violet-500);
  --brand-primary-hover:  var(--violet-600);
  --brand-primary-active: var(--violet-700);
  --brand-secondary:      var(--coral-500);

  --state-success:    var(--green-500);
  --state-success-bg: var(--green-50);
  --state-success-fg: var(--green-800);
  --state-warning:    var(--amber-500);
  --state-warning-bg: var(--amber-50);
  --state-danger:     var(--red-500);
  --state-danger-bg:  var(--red-50);
  --state-live:       var(--coral-500);
  --state-live-bg:    var(--coral-50);
  --state-ai:         var(--violet-500);
  --state-ai-bg:      var(--violet-50);
  --state-human:      var(--ink-600);
  --state-human-bg:   var(--ink-100);

  --gradient-brand:      linear-gradient(135deg, var(--coral-400) 0%, var(--violet-500) 100%);
  --gradient-brand-soft: linear-gradient(135deg, var(--coral-100) 0%, var(--violet-100) 100%);
  --gradient-page-wash:  radial-gradient(120% 100% at 50% -10%, var(--violet-50) 0%, var(--surface-page) 55%);

  --focus-ring: 0 0 0 4px var(--violet-100);

  /* ---- Persian type — the ONLY type scale on this site ---- */
  --font-fa: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;

  --fa-display-xl: 700 4.25rem/1.28 var(--font-fa);
  --fa-display-lg: 700 3.25rem/1.32 var(--font-fa);
  --fa-display-md: 700 2.5rem/1.38 var(--font-fa);
  --fa-display-sm: 650 2.125rem/1.45 var(--font-fa);

  --fa-h1: 700 1.875rem/1.55 var(--font-fa);
  --fa-h2: 650 1.4375rem/1.6 var(--font-fa);
  --fa-h3: 600 1.1875rem/1.65 var(--font-fa);
  --fa-h4: 600 1.0625rem/1.7 var(--font-fa);

  --fa-body-lg: 400 1.1875rem/1.9 var(--font-fa);
  --fa-body-md: 400 1.0625rem/1.85 var(--font-fa);
  --fa-body-sm: 400 0.9375rem/1.8 var(--font-fa);
  --fa-caption: 500 0.8125rem/1.6 var(--font-fa);
  --fa-label:   600 0.875rem/1.5 var(--font-fa);

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

  /* ---- Radii ---- */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(20, 18, 31, 0.05);
  --shadow-sm: 0 2px 6px rgba(20, 18, 31, 0.06), 0 1px 2px rgba(20, 18, 31, 0.05);
  --shadow-md: 0 8px 24px rgba(38, 34, 70, 0.10), 0 2px 6px rgba(38, 34, 70, 0.06);
  --shadow-lg: 0 16px 40px rgba(38, 34, 70, 0.14), 0 4px 12px rgba(38, 34, 70, 0.08);
  --shadow-xl: 0 24px 64px rgba(38, 34, 70, 0.18), 0 8px 20px rgba(38, 34, 70, 0.10);
  --shadow-glow-brand: 0 8px 32px rgba(111, 82, 245, 0.25);
  --shadow-glow-coral: 0 8px 32px rgba(246, 91, 144, 0.25);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-narrow: 780px;
}

/* ---- RTL / Persian document defaults ---- */
html {
  font-family: var(--font-fa);
  /* Vazirmatn ss01 → Persian numerals for any Latin digits */
  font-feature-settings: 'ss01';
  letter-spacing: 0 !important; /* never track Persian script */
}

/* Latin runs (URLs, @handles) stay LTR inside Persian text */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }