/* ==========================================================================
   CallYar — Design tokens
   One visual world: ink, paper, and a single line of dots.
   ========================================================================== */

@font-face {
  font-family: "YekanBakh";
  src: url("../assets/fonts/YekanBakh-VF.woff2") format("woff2-variations"),
       url("../assets/fonts/YekanBakh-VF.woff2") format("woff2");
  font-weight: 100 950;
  font-display: swap;
}

:root {
  /* ---- Colour: strictly monochrome ---------------------------------- */
  --ink: #0b0b0b;
  --paper: #f3f3ef;
  --grey-ink: #8a8a85;     /* secondary text on ink   — 5.9:1 */
  --grey-paper: #5f5f5a;   /* secondary text on paper — 6.0:1 */
  --rule-ink: rgba(243, 243, 239, 0.14);
  --rule-paper: rgba(11, 11, 11, 0.13);

  /* the third colour — signal vermilion, the "line is live" lamp.
     Only on very small elements (dots, ticks, the playhead, hairlines) — never on
     buttons or large areas. 5.3:1 on ink · 3.3:1 on paper (graphics only there) */
  --accent: #f04a16;
  --on-accent: #0b0b0b;

  --bg: var(--ink);
  --fg: var(--paper);
  --muted: var(--grey-ink);
  --rule: var(--rule-ink);

  /* ---- Type: one family, the whole weight range --------------------- */
  --font: "YekanBakh", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero: clamp(2.1rem, 4.2vw, 4rem);
  --fs-h2: clamp(1.65rem, 2.9vw, 2.75rem);
  --fs-h3: clamp(1.2rem, 1.55vw, 1.5rem);
  --fs-statement: clamp(1.55rem, 3.3vw, 3.15rem);
  --fs-lead: clamp(1rem, 1.05vw, 1.125rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --w-thin: 200;
  --w-light: 300;
  --w-reg: 400;
  --w-med: 500;
  --w-bold: 700;
  --w-heavy: 820;

  --lh-head: 1.08;
  --lh-body: 1.65;
  --track-head: -0.025em;

  /* ---- Space (4px base) --------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --section-y: clamp(6rem, 13vw, 11rem);
  --max: 1360px;

  /* ---- Shape: only dots, pills and hard edges ----------------------- */
  --r-pill: 999px;
  --dot: 5px;

  /* ---- Motion -------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-micro: 160ms;
  --t-short: 320ms;
  --t-med: 640ms;
  --t-long: 1000ms;

  /* ---- Layers -------------------------------------------------------- */
  --z-signal: 30;
  --z-rail: 40;
  --z-header: 50;
  --z-wipe: 100;
  --z-skip: 200;
}

:root[lang="fa"] {
  --lh-head: 1.45;
  --lh-body: 1.95;
  --track-head: 0;
}