/* Mudheef design system: one source for colour, type, spacing and the shared parts. The website, dashboard and demo pages
   link this file (/brand/labiq.css, the old address, imports it). The widget lives in a Shadow DOM on other people's stores,
   so it carries the same values in static/widget/10-start.js (tests/test_brand.py keeps the two in step).

   Colour rules (DECISIONS S62, 2026-11-15):
   - Indigo for the mark, text and main buttons, with white text on it. Deeper indigo for code blocks and pressed states.
   - Sand gold only for decoration: dots, small accents, the launcher's AI badge behind indigo. Never text (2.0:1 on white).
   - Deep gold where gold text is needed (4.9 on white, 4.6 on the page).
   - Pale indigo for outgoing bubbles and selected states. White for cards and incoming bubbles. The page is warm sand.
   Contrast (WCAG): white on indigo 14.1, ink-2 on page 6.3, ink-2 on tint 5.7, indigo on gold 7.1, deep gold on page 4.6,
   line-strong on white 3.2, person on its tint 5.5. */
:root {
  --lb-primary: #1E2A4A;
  --lb-primary-hover: #2A3A63;
  --lb-primary-press: #141C33;
  --lb-deep: #141C33;
  --lb-gold: #D9B26F;         /* decoration only, never text */
  --lb-gold-deep: #8E6A2B;    /* gold as text */
  --lb-tint: #E9EBF3;
  --lb-tint-2: #D7DBE9;       /* a tint hover or an edge on tint */
  --lb-page: #F8F6F1;
  --lb-card: #FFFFFF;
  --lb-sunk: #F2EFE8;         /* a calm inset on a card: rows, code, empty boxes */
  --lb-ink: #1E2A4A;
  --lb-ink-2: #545B6E;
  --lb-line: #E3DFD6;
  --lb-line-strong: #8B8F9B;  /* form fields and controls: 3:1 on white */

  /* states, toned to sit with indigo and sand */
  --lb-amber: #8A5A00;  --lb-amber-soft: #FFF4DC;   /* waiting for the team */
  --lb-red: #B3261E;    --lb-red-soft: #FDECEA;     /* errors */
  --lb-person: #0E6B66; --lb-person-soft: #E1F2EF;  /* a person is handling it: not indigo, so it never reads as the AI */
  --lb-blue: #1F5F99;   --lb-blue-soft: #E7F1FA;    /* informational chips (the API page's PUT) */

  --lb-font: "IBM Plex Sans Arabic", "Inter", "Segoe UI", Tahoma, "Geeza Pro", system-ui, sans-serif;  /* S62 */

  --lb-text-xs: 12px;  --lb-text-sm: 13.5px;  --lb-text: 15px;  --lb-text-lg: 17px;
  --lb-h3: 20px;  --lb-h2: clamp(26px, 3vw, 40px);  --lb-h1: clamp(34px, 4.6vw, 60px);

  --lb-s1: 4px;  --lb-s2: 8px;  --lb-s3: 12px;  --lb-s4: 16px;  --lb-s5: 20px;  --lb-s6: 24px;  --lb-s8: 32px;  --lb-s10: 40px;  --lb-s12: 48px;  --lb-s16: 64px;  --lb-s24: 96px;

  --lb-r-sm: 8px;  --lb-r: 12px;  --lb-r-lg: 16px;  --lb-r-xl: 24px;  --lb-r-pill: 999px;
  --lb-bubble-tail: 6px;

  --lb-shadow-1: 0 1px 2px rgba(30, 42, 74, .06);
  --lb-shadow-2: 0 2px 8px -2px rgba(30, 42, 74, .12), 0 1px 2px rgba(30, 42, 74, .06);
  --lb-shadow-3: 0 16px 40px -12px rgba(30, 42, 74, .22), 0 2px 6px rgba(30, 42, 74, .06);

  --lb-ease: cubic-bezier(.16, 1, .3, 1);
  --lb-focus: 0 0 0 2px #fff, 0 0 0 4px var(--lb-primary);
}

.lb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--lb-s2); min-height: 44px; padding: 0 var(--lb-s5);
          border: 0; border-radius: var(--lb-r); background: var(--lb-primary); color: #fff; font: 600 var(--lb-text)/1.2 var(--lb-font);
          text-decoration: none; cursor: pointer; transition: background .15s, transform .15s var(--lb-ease); }
.lb-btn:hover { background: var(--lb-primary-hover); }
.lb-btn:active { background: var(--lb-primary-press); transform: scale(.98); }
.lb-btn:focus-visible { outline: 0; box-shadow: var(--lb-focus); }
.lb-btn[disabled] { opacity: .55; cursor: default; }
.lb-btn--quiet { background: var(--lb-card); color: var(--lb-deep); box-shadow: inset 0 0 0 1px var(--lb-line-strong); }
.lb-btn--quiet:hover { background: var(--lb-tint); }
.lb-btn--quiet:active { background: var(--lb-tint-2); }

/* Who is speaking. Every surface that shows a reply uses these three, so the AI and a person never look alike. */
.lb-tag { display: inline-flex; align-items: center; gap: var(--lb-s1); height: 22px; padding: 0 var(--lb-s2); border-radius: var(--lb-r-pill);
          font: 500 var(--lb-text-xs)/1 var(--lb-font); white-space: nowrap; }
.lb-tag--ai { background: var(--lb-tint); color: var(--lb-deep); }
.lb-tag--waiting { background: var(--lb-amber-soft); color: var(--lb-amber); }
.lb-tag--person { background: var(--lb-person-soft); color: var(--lb-person); }

.lb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--lb-gold); }

/* Conversation bubbles */
.lb-chat { display: flex; flex-direction: column; gap: var(--lb-s1); font: 400 var(--lb-text)/1.65 var(--lb-font); color: var(--lb-ink); }
.lb-bubble { width: fit-content; max-width: 84%; padding: 10px 14px; border-radius: var(--lb-r-lg); unicode-bidi: plaintext; overflow-wrap: anywhere; }
.lb-bubble--in { background: var(--lb-card); box-shadow: inset 0 0 0 1px var(--lb-line); border-start-start-radius: var(--lb-bubble-tail); }
.lb-bubble--out { background: var(--lb-tint); margin-inline-start: auto; border-start-end-radius: var(--lb-bubble-tail); }
.lb-bubble--person { background: var(--lb-card); box-shadow: inset 0 0 0 1.5px var(--lb-person); border-start-start-radius: var(--lb-bubble-tail); }
.lb-sender { display: flex; align-items: center; gap: 6px; margin: var(--lb-s2) var(--lb-s1) 2px; font: 500 var(--lb-text-xs)/1.4 var(--lb-font); color: var(--lb-ink-2); }

@media (prefers-reduced-motion: reduce) {
  .lb-btn { transition: none; }
}

/* English pages read in Inter, Arabic ones in IBM Plex Sans Arabic. */
html[lang="en"] { --lb-font: "Inter", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif; }