:root{
  /* ---- Brand base ---- */
  --navy-900:#0d1729;   /* deepest ground, page base behind sections */
  --navy-800:#122340;
  --navy-700:#192d49;   /* BRAND NAVY — the dominant surface */
  --navy-600:#22395a;   /* raised panels, inputs */
  --navy-500:#2e4a70;   /* hairlines on navy, hover fills */
  --navy-400:#3d5f8d;   /* hairline on light navy, chart strokes */
  --red-600:#d6113a;    /* pressed */
  --red-500:#ff224c;    /* BRAND RED — accent, CTA */
  --red-400:#ff4f72;    /* hover */
  --red-100:#ffe4e9;    /* tint on white surfaces */
  --white:#ffffff;
  --paper-100:#f6f7f9;  /* off-white card surface */
  --paper-200:#e8ebef;  /* borders on white surfaces */

  /* ---- Ink (text) ---- */
  --ink-100:#ffffff;             /* headlines on navy */
  --ink-200:#d5deea;            /* body on navy */
  --ink-300:#9fb0c6;            /* secondary / meta on navy */
  --ink-400:#6d819c;            /* disabled on navy */
  --ink-on-paper-100:#101f36;   /* headlines on white */
  --ink-on-paper-200:#3d4d64;   /* body on white */
  --ink-on-paper-300:#6b7a91;   /* meta on white */

  /* ---- Semantic aliases: surfaces ---- */
  --surface-page:var(--navy-900);
  --surface-section:var(--navy-700);
  --surface-card:var(--navy-600);
  --surface-card-raised:var(--navy-500);
  --surface-invert:var(--white);      /* the "pop" panel (contact form) */
  --surface-invert-muted:var(--paper-100);
  --surface-accent:var(--red-500);
  --surface-overlay:rgba(9,17,31,.72);

  /* ---- Semantic aliases: text ---- */
  --text-display:var(--ink-100);
  --text-body:var(--ink-200);
  --text-muted:var(--ink-300);
  --text-disabled:var(--ink-400);
  --text-accent:var(--red-500);
  --text-on-accent:var(--white);
  --text-on-invert:var(--ink-on-paper-100);
  --text-on-invert-body:var(--ink-on-paper-200);
  --text-on-invert-muted:var(--ink-on-paper-300);
  --text-link:var(--white);
  --text-link-hover:var(--red-400);

  /* ---- Semantic aliases: lines ---- */
  --border-hairline:rgba(255,255,255,.09);   /* default divider on navy */
  --border-strong:rgba(255,255,255,.18);     /* card edge, input rest */
  --border-focus:var(--red-500);
  --border-on-invert:var(--paper-200);

  /* ---- Status ---- */
  --status-success:#2fd18a;
  --status-warning:#ffb64a;
  --status-danger:var(--red-500);
  --status-info:#5aa9ff;
  --status-success-bg:rgba(47,209,138,.12);
  --status-warning-bg:rgba(255,182,74,.12);
  --status-danger-bg:rgba(255,34,76,.12);
  --status-info-bg:rgba(90,169,255,.12);

  /* ---- Atmosphere ---- */
  --glow-red:radial-gradient(60% 60% at 50% 0%,rgba(255,34,76,.28) 0%,rgba(255,34,76,0) 70%); /* @kind color */
  --glow-navy:radial-gradient(50% 50% at 50% 50%,rgba(46,74,112,.55) 0%,rgba(13,23,41,0) 75%); /* @kind color */
  --scrim-bottom:linear-gradient(to top,rgba(13,23,41,.95) 0%,rgba(13,23,41,0) 100%); /* @kind color */
  /* The mark's dot motif as a ground texture. Hero stages only. */
  --texture-dots:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px) 0 0/22px 22px; /* @kind color */
}
:root{
  --font-sans:"Vazirmatn","Segoe UI",Tahoma,sans-serif;   /* Persian + Latin, everything */
  --font-display:"Vazirmatn","Segoe UI",Tahoma,sans-serif; /* same family, heavy weights */
  --font-mono:"JetBrains Mono","Vazirmatn",ui-monospace,monospace; /* API keys, code, numerals */

  --fw-light:300; /* @kind font */
  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */
  --fw-black:900; /* @kind font */

  /* Display — dramatic, tight. Persian needs generous line-height for ascenders.
     Standard scale (13/15/16/18/20/24/28/34/40) — each step below is one rung of it,
     never a one-off value. Second reduction pass: the previous 60/52px ceilings still
     read as oversized on ordinary desktop widths, so both display sizes now plateau
     well under 1600px instead of scaling past it. */
  --fs-display-1:clamp(1.75rem,2.6vw,2.5rem); /* @kind font */   /* 28 → 40 — hero title */
  --fs-display-2:clamp(1.625rem,2.2vw,2.125rem); /* @kind font */ /* 26 → 34 — section heading, article title */
  --fs-display-3:1.5rem; /* @kind font */                        /* 24 — feature-row title, stat value */
  --lh-display:1.24; /* @kind font */
  --ls-display:-0.015em; /* @kind font */

  /* Headings */
  --fs-h1:1.75rem; /* @kind font */   /* 28 */
  --fs-h2:1.5rem; /* @kind font */    /* 24 */
  --fs-h3:1.25rem; /* @kind font */   /* 20 */
  --fs-h4:1.125rem; /* @kind font */  /* 18 */
  --lh-heading:1.45; /* @kind font */

  /* Body */
  --fs-body-lg:1.125rem; /* @kind font */ /* 18 — hero sub, article body */
  --fs-body:1rem; /* @kind font */        /* 16 — default */
  --fs-body-sm:0.9375rem; /* @kind font *//* 15 */
  --fs-caption:0.8125rem; /* @kind font *//* 13 — meta, labels */
  --lh-body:1.9; /* @kind font */         /* Persian reads better loose */
  --lh-body-tight:1.7; /* @kind font */

  /* Eyebrow / overline — the one place we letterspace */
  --fs-eyebrow:0.8125rem; /* @kind font */
  --ls-eyebrow:0.14em; /* @kind font */
  --fw-eyebrow:600; /* @kind font */

  /* Mono */
  --fs-mono:0.875rem; /* @kind font */
  --ls-mono:0.01em; /* @kind font */
}
:root{
  /* 4px base, with a 6px step because inputs and chips sit at 14px padding */
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:14px;
  --space-5:18px;
  --space-6:24px;
  --space-7:32px;
  --space-8:44px;
  --space-9:64px;
  --space-10:88px;
  --space-11:120px;

  /* Layout */
  --container-max:1240px; /* @kind spacing */
  --container-narrow:760px; /* @kind spacing */   /* article measure */
  --gutter:24px; /* @kind spacing */
  --gutter-lg:40px; /* @kind spacing */
  --section-y:clamp(64px,9vw,120px); /* @kind spacing */
  --section-y-tight:clamp(44px,6vw,72px); /* @kind spacing */
  --grid-gap:24px; /* @kind spacing */
  --header-h:76px; /* @kind spacing */
}
:root{
  --radius-xs:4px;    /* tags, tiny chips */
  --radius-sm:10px;   /* inputs, buttons */
  --radius-md:18px;   /* cards — the signature radius, echoes the logo box */
  --radius-lg:28px;   /* hero panels, slider frame */
  --radius-pill:999px;/* eyebrow chips, pagination, filter chips */
  --radius-logo-box:21.3%; /* @kind radius */ /* logo box corner ratio — keep proportional when scaling the mark */
}
:root{
  /* On navy, elevation reads as a lighter fill + hairline, not a drop shadow.
     Shadows are reserved for surfaces that leave the navy plane. */
  --shadow-none:none;
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-card:0 1px 0 rgba(255,255,255,.05) inset,0 18px 40px -24px rgba(4,10,20,.9);
  --shadow-pop:0 32px 80px -32px rgba(4,10,20,.85),0 2px 0 rgba(255,255,255,.6) inset;
  --shadow-accent:0 14px 34px -14px rgba(255,34,76,.55);
  --shadow-header:0 1px 0 var(--border-hairline);
  --blur-glass:saturate(1.4) blur(14px); /* @kind other */
  --ring-focus:0 0 0 3px rgba(255,34,76,.35); /* @kind shadow */
}
:root{
  --ease-out:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-entrance:cubic-bezier(.16,1,.3,1); /* @kind other */  /* long, decisive settle */
  --ease-inout:cubic-bezier(.65,.05,.36,1); /* @kind other */
  --dur-instant:120ms; /* @kind other */
  --dur-fast:180ms; /* @kind other */   /* hover, press */
  --dur-base:260ms; /* @kind other */   /* chips, accordions */
  --dur-slow:420ms; /* @kind other */   /* entrances, slide changes */
  --dur-slider:600ms; /* @kind other */ /* hero carousel crossfade+slide */
  --transition-interactive:background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out); /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{
    --dur-fast:1ms; /* @kind other */
    --dur-base:1ms; /* @kind other */
    --dur-slow:1ms; /* @kind other */
    --dur-slider:1ms; /* @kind other */
  }
}