/* ---------------------------------------------------------------------------
   The design system. Loaded first by both pages, so a token changed here lands
   on the operator console and the client inbox at once.

   Light is the default and the product face. Dark is not a second theme so much
   as the palette this console already had — keeping those exact values means an
   operator who flips to dark gets the tool they know, not an approximation.

   Rules for everything downstream:
     - never write a raw colour outside this file; webAssets.test.ts fails the
       build on one, because a hard-coded hex is invisible in light mode until
       someone opens the page and finds black-on-black
     - use the -text variants for text and the plain ones for borders and dots.
       #10b981 on white is about 2.5:1, which fails WCAG as text but is right
       for a 3px indicator
     - 8-digit hex for alpha, not color-mix(): this opens in whatever WebView a
       business owner happens to have
   --------------------------------------------------------------------------- */

/* ── the typeface, self-hosted ─────────────────────────────────────────────
   Assistant, by Ben Nathan. SIL Open Font License 1.1 - see docs/FONT-LICENSE.txt.
   Designed for Hebrew screen UI, which the previous system stack was not: that
   resolved to Segoe UI on Windows and Arial Hebrew on iOS, both competent and
   neither designed for this.

   SELF-HOSTED, AND THAT IS THE WHOLE POINT. A Google Fonts <link> would send
   every client's and every operator's IP to a third party on page load, which
   this product does not do anywhere else. The files sit in public/assets and
   are served by our own Express, so the rule "zero external requests" survives
   intact. It was never the webfont that broke it - it was the CDN.

   One VARIABLE file per subset covers every weight, which is why 400 and 600
   cost one download rather than two. Hebrew is 7kb and Latin 22kb, and the
   unicode-range split means a page of Hebrew never fetches the Latin file until
   a Latin character appears.

   font-display: swap - text paints immediately in the fallback and swaps when
   the font lands. Never `block`: a business owner on a slow phone in a shop
   would stare at invisible text. */
@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/assistant-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/assistant-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root,
:root[data-theme="light"] {
  color-scheme: light;

  --ui-bg: #f9fafb;
  --ui-surface: #ffffff;
  --ui-surface-muted: #f6f7f8;
  --ui-surface-sunken: #f1f2f4;

  --ui-border: #e5e7eb;
  --ui-border-strong: #d4d7dd;
  /* The card edge. Light leans on the shadow, dark on the line. */
  --ui-card-border: #10182812;

  --ui-text: #18181b;
  --ui-text-secondary: #52525b;
  --ui-text-muted: #8b8d98;

  --ui-accent: #2563eb;
  --ui-accent-hover: #1d4ed8;
  --ui-accent-soft: #2563eb14;
  --ui-accent-text: #ffffff;

  --ui-primary: #18181b;
  --ui-primary-hover: #2d2d33;
  --ui-primary-text: #ffffff;

  --ui-ok: #10b981;
  --ui-ok-text: #047857;
  --ui-ok-soft: #10b98118;

  --ui-warn: #f59e0b;
  --ui-warn-text: #b45309;
  --ui-warn-soft: #f59e0b1f;

  --ui-bad: #dc2626;
  --ui-bad-text: #b91c1c;
  --ui-bad-soft: #dc26261a;

  /* The lead-funnel pills. Three DISTINCT hues on purpose: hot / qualified /
     won have to stay tellable apart at a glance, and folding "won" into the
     accent would print it in the same blue as "qualified". Won borrows the
     sidebar violet, which is also where this palette's purple went. */
  --ui-hot: #f97316;
  --ui-hot-text: #c2410c;
  --ui-hot-soft: #f973161f;
  --ui-info: #2563eb;
  --ui-info-text: #1d4ed8;
  --ui-info-soft: #2563eb1a;
  --ui-won: #6427f2;
  --ui-won-text: #5b21b6;
  --ui-won-soft: #6427f21a;

  --ui-bubble-in: #f1f2f4;
  --ui-bubble-out: #ecfdf5;
  --ui-bubble-human: #eef2ff;

  --ui-sidebar-from: #3b0ca3;
  --ui-sidebar-to: #6427f2;
  --ui-sidebar-text: #ffffff;
  --ui-sidebar-text-dim: #ffffffb3;
  --ui-sidebar-item-hover: #ffffff1f;
  --ui-sidebar-item-active: #ffffff2e;

  --ui-shadow-xs: 0 1px 2px #1018280a;
  --ui-shadow-sm: 0 1px 2px #1018280d, 0 1px 3px #1018280f;
  --ui-shadow-md: 0 4px 12px #10182814;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --ui-bg: #0f1117;
  --ui-surface: #181b25;
  --ui-surface-muted: #1e222e;
  --ui-surface-sunken: #10131c;

  --ui-border: #2a2f3e;
  --ui-border-strong: #3a4152;
  --ui-card-border: #2a2f3e;

  --ui-text: #e8eaf0;
  --ui-text-secondary: #b6bccd;
  --ui-text-muted: #9aa1b5;

  --ui-accent: #60a5fa;
  --ui-accent-hover: #93c5fd;
  --ui-accent-soft: #60a5fa24;
  --ui-accent-text: #0f1117;

  --ui-primary: #e8eaf0;
  --ui-primary-hover: #ffffff;
  --ui-primary-text: #0f1117;

  --ui-ok: #2fbf71;
  --ui-ok-text: #4fd68d;
  --ui-ok-soft: #2fbf7126;

  --ui-warn: #e8b339;
  --ui-warn-text: #f0c765;
  --ui-warn-soft: #e8b33926;

  --ui-bad: #e05555;
  --ui-bad-text: #f08080;
  --ui-bad-soft: #e0555526;

  --ui-hot: #ff7a5c;
  --ui-hot-text: #ff9478;
  --ui-hot-soft: #ff7a5c2e;
  --ui-info: #60a5fa;
  --ui-info-text: #7cb7fb;
  --ui-info-soft: #60a5fa26;
  --ui-won: #a78bfa;
  --ui-won-text: #b9a3fb;
  --ui-won-soft: #a78bfa2e;

  --ui-bubble-in: #232838;
  --ui-bubble-out: #1e3a2b;
  --ui-bubble-human: #332a4d;

  --ui-sidebar-from: #2d0982;
  --ui-sidebar-to: #4d18c9;
  --ui-sidebar-text: #ffffff;
  --ui-sidebar-text-dim: #ffffffa6;
  --ui-sidebar-item-hover: #ffffff17;
  --ui-sidebar-item-active: #ffffff26;

  --ui-shadow-xs: 0 1px 2px #00000059;
  --ui-shadow-sm: 0 1px 3px #00000066;
  --ui-shadow-md: 0 6px 18px #00000073;
}

/* Theme-independent. */
:root {
  --ui-radius-sm: 6px;
  --ui-radius: 8px;
  --ui-radius-lg: 10px;
  --ui-radius-xl: 12px;
  --ui-sidebar-w: 250px;
  --ui-topbar-h: 56px;

  /* ── spacing scale ────────────────────────────────────────────────────────
     Six steps, and nothing downstream invents a seventh.

     This is the single change that most separates a page that was BUILT from
     one that was DESIGNED, and it is not a matter of taste: the stylesheets had
     drifted to 9px, 13px, 14px, 18px and 26px in places where the difference
     was never a decision, only whatever looked right in isolation. Values that
     close together read as misalignment rather than as rhythm.

     Steps roughly double. If a gap needs something between two of them, the
     answer is almost always that it needs one of the two. */
  --ui-s1: 4px;
  --ui-s2: 8px;
  --ui-s3: 12px;
  --ui-s4: 16px;
  --ui-s5: 24px;
  --ui-s6: 40px;

  /* ── type scale ───────────────────────────────────────────────────────────
     Same argument as the spacing scale. 13px and 13.5px on one page is not a
     hierarchy, it is two people guessing. */
  --ui-t-xs: 12.5px;
  --ui-t-sm: 13.5px;
  --ui-t-md: 15px;
  --ui-t-lg: 17px;
  --ui-t-xl: 21px;
  --ui-t-2xl: 26px;

  /* ── line height, and why Hebrew gets its own number ──────────────────────
     Hebrew is written without vowels, so a line carries more glyph and less
     air than the same line in Latin at the same size. The 1.5-1.6 that reads
     as comfortable in English reads as crowded in Hebrew, which is most of why
     these pages felt dense without anyone being able to say where.

     --ui-lh-tight exists for tables and lists, where 1.75 turns a scannable
     console into scrolling. The operator's tables are dense ON PURPOSE. */
  --ui-lh-body: 1.75;
  --ui-lh-heading: 1.3;
  --ui-lh-tight: 1.45;

  /* ── integration brand colours ────────────────────────────────────────────
     Theme-independent on purpose: WhatsApp is the same green in the dark.

     These are APPROXIMATIONS drawn to be recognisable, not official brand
     assets. Two of them (Arbox, Fireberry) are best-guess hues because their
     published marks were not to hand. The glyphs that use them are simplified
     shapes drawn inline, which is also why they are here at all: the app makes
     zero external requests, so a logo cannot be an <img> pointing at a CDN.

     If these ever go in front of a prospect as "official", get the real SVGs
     from each brand's press kit first and replace both the paths and these
     values. Until then they are a visual cue, and the label is the truth. */
  --brand-whatsapp: #25d366;
  --brand-telegram: #229ed9;
  --brand-instagram: #e1306c;
  --brand-messenger: #0084ff;
  --brand-arbox: #12b5a5;
  --brand-fireberry: #ff6b35;

  /* Assistant first, self-hosted (see the @font-face block at the top). The
     rest is the fallback chain that renders during `swap` and forever if the
     font fails to load - it resolves to SF Hebrew on iOS, Segoe UI on Windows
     and Noto Sans Hebrew on Android, so a failed download costs polish and
     never legibility.

     The old comment here said "no webfont by choice, this app makes zero
     external requests". The second half is still true and the first half did
     not follow from it: a font served from our own origin is not an external
     request. */
  --ui-font: "Assistant", "Inter", "Heebo", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Rubik", "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: var(--ui-font);
  line-height: var(--ui-lh-body);
  -webkit-text-size-adjust: 100%;
}

/* Headings sit tight and stop shouting.
   700 in Hebrew reads as SHOUTING far more than it does in Latin - the letters
   have no ascenders or descenders to break up the mass, so a bold line becomes
   a solid black bar. 600 keeps the hierarchy and loses the shove. */
h1, h2, h3, h4, h5, h6 {
  line-height: var(--ui-lh-heading);
  font-weight: 600;
}

/* Density where density is the point. A table inherits body leading otherwise,
   and 1.75 turns the operator's scannable console into scrolling.

   Only the ELEMENT is set here. Components that also want tight leading say so
   in their own stylesheet - design.css naming .checklist or .asset would make
   the token layer depend on the pages that consume it, which is backwards. */
table {
  line-height: var(--ui-lh-tight);
}

/* Immediate feedback on touch, where there is no hover to rely on. A phone has
   no :hover, so without this every button in the product feels unresponsive for
   the length of a network round trip. */
button:active {
  transform: translateY(1px);
}

:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── theme toggle ───────────────────────────────────────────────────────── */
.theme-btn {
  background: none;
  border: 1px solid var(--ui-border);
  color: var(--ui-text-secondary);
  border-radius: var(--ui-radius);
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  line-height: 1;
  min-height: 36px;
}
.theme-btn:hover { color: var(--ui-text); border-color: var(--ui-border-strong); }