/* מחוץ לקופסה · design tokens, direction A: white / ink / blue (chosen 2026-11-06 from design/palettes.css; the earlier cream values live on there as history).
   Every UI value comes from here. Colours are named by role, spacing runs on a 4/8 grid. */
:root{
  /* Colour: surfaces and text */
  --color-paper:#FFFFFF;
  --color-surface:#F4F6F9;
  --color-ink:#0F1115;
  --color-ink-muted:#5B606E;
  --color-on-ink:#FFFFFF;
  --color-on-ink-muted:#B3B8C4;
  /* The closing band (contact, footer): the strong blue, the user's choice on 2026-11-09 (design/ink-compare.html).
     White on it is 9.6:1, the muted grey 4.85:1. */
  --color-band:var(--color-accent-strong);
  /* Small solid marks (agent tabs, ticks, status pills, the picked slot, path nodes, the hub core, the hero's
     outcomes, the pressed chip) are filled with this, not with ink: black stays for text and thin lines */
  --color-mark:var(--color-accent-strong);
  --color-on-band:var(--color-on-ink);
  --color-on-band-muted:var(--color-on-ink-muted);

  /* Colour: the one accent, for actions, flow, and a few marked words in headings (the user asked for blue in the text, 2026-11-06) */
  --color-accent:#2B3AF5;
  --color-accent-strong:#1A27C9;
  --color-accent-soft:#7480FF;
  --color-on-accent:#FFFFFF;

  /* Colour: lines. line-strong holds 3:1 on paper, so it can carry meaning */
  --color-line:#DEE2E8;
  --color-line-strong:#868C99;

  /* Colour: the box */
  --color-box-front:#F8F9FB;
  --color-box-side:#E8EBF0;
  --color-box-flap-a:#E2E6EC;
  --color-box-flap-b:#ECEFF3;
  --color-box-inside:#D1D6DE;

  /* Type: one family, two weights */
  --font-sans:"IBM Plex Sans Hebrew","Arial Hebrew",Arial,sans-serif;
  --weight-regular:400;
  --weight-bold:700;
  --text-label:.8125rem;
  --text-small:.875rem;
  --text-body:1.0625rem;
  --text-lead:1.2rem;
  /* The one big headline: as large as the hero column allows while each of its two lines stays whole
     (1.4x the section titles on wide screens, measured 2026-11-06). Phones use the narrow size. */
  --text-display:clamp(2.7rem,6.4vw,5.25rem);
  --text-display-narrow:clamp(2.7rem,12vw,3rem);
  --text-display-xl:clamp(2.7rem,6.6vw,5.6rem);
  --leading-display:1.06;
  --leading-snug:1.25;
  --leading-title:1.12;
  --leading-body:1.55;
  --tracking-display:-.01em;
  --measure-lead:40ch;
  /* Type: the rest of the page */
  --text-title:clamp(2.25rem,4.6vw,3.75rem);
  --text-title-sm:clamp(1.9rem,3.4vw,2.75rem);
  --text-subtitle:1.5rem;
  --text-figure:clamp(2.4rem,6vw,4rem);
  --measure-text:62ch;
  --measure-head:54rem;

  /* Spacing: 4/8 grid */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;

  /* Layout and shape */
  --page-max:1240px;
  --gutter:clamp(var(--space-4),4vw,var(--space-7));
  --size-logo:30px;
  --size-tap:44px;
  --size-dot:6px;
  --frame-phone-w:390px;
  --frame-phone-h:844px;
  --frame-desktop-w:1440px;
  --frame-desktop-h:900px;
  --border-hair:1px;
  --radius-sm:6px;
  --radius-lg:14px;
  --radius-pill:999px;
  --focus-width:2px;
  --focus-offset:2px;
  --underline-offset:4px;
  --press-offset:1px;
  /* Page grids */
  --section-pad:clamp(var(--space-8),9vw,var(--space-9));
  --grid-hero:1fr 1.05fr;
  --grid-split:minmax(0,1fr) minmax(0,1fr);
  --stage-max:36rem;
  --size-node:14px;
  --size-mini:7.5rem;
  --ui-max:28rem;

  /* Shadow: two levels, only for things floating above the page */
  --shadow-1:0 1px 2px rgb(17 18 22 / .12);
  --shadow-2:0 8px 24px rgb(17 18 22 / .16);

  /* Diagram strokes, in SVG user units */
  --stroke-hair:1;
  --stroke-flow:1.3;
  --stroke-order:1.6;

  /* Motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.45,0,.55,1);
  --dur-fast:120ms;
  --dur-base:260ms;
  --dur-cube:3.2s;
  --dur-flow-cycle:8s;
  --dur-flow-step:1.6s;
  --dur-flow-first:.4s;
  /* One chain at a time: each problem gets its own step, and nothing overlaps.
     in + out + fade fill exactly one step (1.5s + .6s + .3s = 2.4s), five steps make the cycle. */
  --dur-chain-cycle:12s;
  --dur-chain-step:2.4s;
  --dur-chain-in:1.5s;
  --dur-chain-out:.6s;
  --dur-story:16s;
  /* Section sequences play once when they scroll into view, and end within 5s (WCAG 2.2.2) */
  --dur-reveal:.5s;
  /* Sections build up every time they enter the screen, scrolling down or up (the user's request, after async.co.il) */
  --dur-reveal-in:1.1s;
  --dur-reveal-step:.14s;
  --motion-reveal:32px;
  --dur-demo-step:1.1s;
  --dur-path:3s;
  --dur-flow-run:1.2s;
  /* Working diagrams loop while on screen: each round ends, holds its finished state this long, and starts again */
  --dur-loop-hold:2.5s;
  /* Agent networks never empty: the cards stay, and the fragments inside refresh in turn on one shared cycle.
     Every moment in that cycle is written in units of a ninth of it (one second at 9s). */
  --dur-net-cycle:9s;
  --dur-net-unit:calc(var(--dur-net-cycle) / 9);
  --motion-bob:12px;
  --motion-exit:96px;
  /* The phone drawing is shorter: the cube clears the box rim but stays under the lowest problem label */
  --motion-exit-narrow:48px;

  /* The site agent (chat, 2026-11-09). The panel floats, so it may take --shadow-2. */
  --chat-panel-w:25rem;
  --chat-panel-h:40rem;
  --chat-drawer-w:26rem;
  --chat-sheet-h:72vh;
  --chat-thread-min:16rem;
  --chat-input-max:8rem;
  /* Text arrives in small pieces at this pace; the wait before the first piece reads as the agent working */
  --dur-stream-tick:32ms;
  --dur-think:.7s;
  --dur-chat-step:.45s;
  --dur-spot:1.6s;
}

@media (prefers-reduced-motion:reduce){
  :root{
    --dur-fast:0ms;
    --dur-base:0ms;
    --dur-stream-tick:0ms;
    --dur-chat-step:0ms;
    --dur-spot:0ms;
  }
}