/* ============================================================
   QMETER DESIGN TOKENS  —  drop-in CSS custom properties
   Source of truth: qmeter.net (Qmeter Web V2). Values verified
   against production CSS. Use var(--token) everywhere; never
   hardcode a hex that isn't in this file.
   ============================================================ */

:root {
  /* ---------- Surfaces ---------- */
  --bg-page:     #f8f8f8;   /* app / page background */
  --bg-surface:  #ffffff;   /* cards, panels, message area */
  --bg-subtle:   #fbfbfd;   /* very light raised block */
  --bg-muted:    #f0f0f4;   /* input wells, hover rows */

  /* ---------- Ink (text) ---------- */
  --ink-strong:  #000000;   /* headings, primary UI text */
  --ink-body:    #1f1f1f;   /* paragraph / message text */
  --ink-muted:   #6b6f76;   /* secondary, captions, timestamps */
  --ink-faint:   #9aa0aa;   /* placeholders, disabled */
  --ink-inverse: #ffffff;   /* text on black surfaces */

  /* ---------- Borders & dividers ---------- */
  --border:       rgba(0, 0, 0, 0.07);  /* default hairline */
  --border-solid: #e7e7ec;              /* opaque divider */
  --border-light: #eaeaea;              /* faint rule / bullet */

  /* ---------- Brand accent gradient (USE SPARINGLY) ----------
     Only for: eyebrow chips, one highlighted word, small badges,
     focus rings, the active nav dot. NEVER large fills or text
     blocks. This gradient IS the brand — restraint keeps it premium. */
  --accent-1: #6a5cff;   /* indigo  */
  --accent-2: #b35cdc;   /* purple  */
  --accent-3: #ec5a9c;   /* pink    */
  --gradient-accent: linear-gradient(120deg, #6a5cff 0%, #b35cdc 50%, #ec5a9c 100%);
  --accent-solid: #6a5cff;              /* when you need ONE accent color */
  --accent-ring:  rgba(106, 92, 255, 0.35); /* focus glow */

  /* ---------- Semantic (states) ---------- */
  --info:         #3b82f6;  --info-strong:    #1d4ed8;  --info-bg:    #eff6ff;
  --success:      #16a34a;  --success-strong: #15803d;  --success-bg: #dcfce7;
  --danger:       #dc2626;  --danger-strong:  #b91c1c;  --danger-bg:  #fee2e2;
  --warning:      #f59e0b;  --warning-strong: #b45309;  --warning-bg: #fff7ed;

  /* ---------- Shadows (SOFT only — never harsh) ---------- */
  --shadow-sm:    0 2px 8px  rgba(0, 0, 0, 0.04);
  --shadow:       0 8px 30px rgba(0, 0, 0, 0.06);   /* default card */
  --shadow-lift:  0 14px 40px rgba(0, 0, 0, 0.10);  /* hover */

  /* ---------- Radius ---------- */
  --radius-chip:  999px;  /* pills, eyebrows, avatars */
  --radius-btn:   12px;   /* buttons */
  --radius-card:  16px;   /* cards, message bubbles */
  --radius-band:  20px;   /* dark CTA container, big panels */
  --radius-sm:    8px;    /* inputs, small controls */

  /* ---------- Typography ---------- */
  --font-body:   "TT Fors", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-medium: "TT Fors Medium", "TT Fors", sans-serif; /* headings / CTAs */
  --font-arabic: "Noto Sans Arabic", "TT Fors", sans-serif; /* RTL */
  --font-mono:   ui-monospace, "SF Mono", Menlo, monospace;  /* code in chat */

  --fs-h1: 48px;   --lh-h1: 1.08;
  --fs-h2: 36px;   --lh-h2: 1.15;
  --fs-h3: 22px;   --lh-h3: 1.30;
  --fs-lg: 17px;
  --fs-body: 16px; --lh-body: 1.60;
  --fs-sm: 14px;
  --fs-xs: 13px;
  --fs-eyebrow: 13px;  --ls-eyebrow: 0.14em;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-8: 48px;  --space-10: 64px;
  --space-12: 96px;

  /* ---------- Layout ---------- */
  --content-max: 1240px;
  --section-pad-y: 96px;
  --section-pad-x: 24px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.18s;
  --dur: 0.28s;
  --dur-reveal: 0.55s;
}

/* Optional dark surface tokens (for a dark chat theme / CTA bands).
   The brand's dark is TRUE black, not a blue-gray. */
:root {
  --dark-bg:      #000000;
  --dark-surface: #0f0f12;
  --dark-border:  rgba(255, 255, 255, 0.10);
  --dark-ink:     #ffffff;
  --dark-muted:   #9aa0aa;
}