/* ============================================================
   tokens.css — the single source of truth
   ------------------------------------------------------------
   Change a value HERE and it propagates to:
     · the child theme styles
     · Elementor (via the auto-kit the plugin writes)
     · every generated section
   ------------------------------------------------------------
   Colour roles (the rule that keeps the palette disciplined):
     navy  = structure   (backgrounds, headings, borders)
     teal  = emphasis    (labels, key numbers, bullet dots,
                          side-bars on titles, links, table heads)
     amber = numbers only
   teal must never exceed ~5-8% of any page's surface area.
   ============================================================ */

:root {
  /* ---------- navy: structure ---------- */
  --n900: #0A1628;
  --n800: #14243D;
  --n700: #1E3A5F;
  --n600: #2A4E7A;
  --n500: #3E6BA8;
  --n400: #7FA8D4;
  --n200: #C7DCF0;
  --n100: #E4EEF8;
  --n50:  #F2F7FC;

  /* ---------- teal: emphasis ---------- */
  --t900: #042F2E;
  --t800: #065F5B;
  --t700: #0B7C75;
  --t600: #0F9B91;
  --t500: #14B8A6;
  --t400: #2DD4BF;
  --t300: #5EEAD4;
  --t200: #99F6E4;
  --t100: #CCFBF1;
  --t50:  #F0FDFA;

  /* ---------- amber: numbers only ---------- */
  --a700: #92400E;
  --a600: #B45309;
  --a500: #D97706;
  --a400: #F59E0B;
  --a100: #FEF3C7;
  --a50:  #FFFBEB;

  /* ---------- body text ---------- */
  --ink900: #0F172A;
  --ink800: #1E293B;
  --ink700: #334155;
  --ink600: #475569;
  --ink500: #64748B;
  --ink400: #94A3B8;
  --ink300: #CBD5E1;
  --ink200: #E2E8F0;
  --ink100: #F1F5F9;
  --ink50:  #F8FAFC;

  /* ---------- status ---------- */
  --ok:    #15803D;
  --ok-bg: #F0FDF4;
  --warn:  #B45309;
  --warn-bg: #FFFBEB;
  --err:   #B91C1C;
  --err-bg: #FEF2F2;

  /* ---------- typography ---------- */
  --font: 'Vazirmatn', 'Vazirmatn FD', Tahoma, sans-serif;
  --font-en: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-base: 15px;
  --fs-md: 16.5px;
  --fs-lg: 19px;
  --fs-xl: 24px;
  --fs-2xl: 30px;
  --fs-3xl: 34px;
  --fs-4xl: 42px;
  --fs-hero: 48px;

  --lh-tight: 1.35;
  --lh-base: 1.85;

  /* ---------- spacing scale (8px rhythm) ---------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;
  --s20: 80px;
  --s22: 88px;

  --container: 1140px;
  --gap-section: var(--s22);
  --gap-section-tablet: var(--s16);
  --gap-section-mobile: var(--s12);
  --pad-x: var(--s5);
  --pad-x-mobile: var(--s4);

  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 14px;

  --shadow-sm: 0 2px 8px rgba(15, 23, 42, .05);
  --shadow: 0 8px 24px rgba(15, 23, 42, .08);

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================
   Base — applied to the whole site
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink800);
  background: var(--white, #fff);
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--s3);
  font-weight: 800;
  line-height: var(--lh-tight);
  color: var(--ink900);
  letter-spacing: 0;
}

h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: 17px; }

p { margin: 0 0 var(--s4); color: var(--ink600); }

a {
  color: var(--t700);
  text-decoration: none;
  transition: color .18s var(--ease);
}
a:hover { color: var(--t800); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--s4); padding-right: var(--s5); }
li { margin-bottom: var(--s1); color: var(--ink600); }

button { font-family: inherit; }

/* ---------- links inside body copy must stay readable on white ---------- */
main a,
.entry-content a,
.elementor-widget-text-editor a { color: var(--t800); text-decoration: underline; }

/* ============================================================
   Elementor bridge
   The plugin sets these so generated sections inherit the
   same type scale and colour roles as the hand-written CSS.
   ============================================================ */

.elementor-section { padding: var(--gap-section) var(--pad-x); }
.elementor-section > .elementor-container,
.elementor-top-section > .elementor-container { max-width: var(--container); }

@media (max-width: 1024px) {
  h1 { font-size: 38px; }
  h2 { font-size: var(--fs-2xl); }
  .elementor-section { padding: var(--gap-section-tablet) var(--pad-x); }
}

@media (max-width: 767px) {
  body { font-size: 14.5px; }
  h1 { font-size: 29px; }
  h2 { font-size: 26px; }
  h3 { font-size: 18px; }
  p { font-size: 14.5px; }
  .elementor-section { padding: var(--gap-section-mobile) var(--pad-x-mobile); }
}

/* ============================================================
   Reusable pieces the plugin can also reference
   ============================================================ */

.at-eyebrow {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--t700);
  letter-spacing: .02em;
  margin-bottom: var(--s2);
}

.at-card {
  background: #fff;
  border: 1px solid var(--ink200);
  border-radius: var(--radius);
  padding: var(--s6);
}

.at-callout {
  background: var(--a50);
  border: 1px solid var(--a100);
  border-radius: var(--radius);
  padding: var(--s5) var(--s6);
  font-size: 13.5px;
  color: var(--ink700);
}

.at-num { color: var(--a600); font-weight: 800; }

@media print {
  html, body { background: #fff; }
  .elementor-section { padding: var(--s6) 0; }
  a { color: var(--ink800); }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}