/* ==========================================================================
   tokens.css — Design tokens — dark (default) + light theme custom properties.
   Part of منصة عقاب dashboard styles. Split from the former app.css.
   Cascade order is significant; see docs/flows/INDEX.md.
   ========================================================================== */
/* ══════════════════════════════════════════════════════
   DESIGN TOKENS — DARK  (default)
   Contrast ratios verified vs WCAG AA (4.5:1 body, 3:1 large)
══════════════════════════════════════════════════════ */
:root {
  /* Backgrounds */
  --bg:  #0f0f13;
  --s1:  #161619;
  --s2:  #1d1d24;
  --s3:  #252530;
  --s4:  #2e2e3c;

  /* Gold — 7.4:1 on --bg */
  --g:   #caa55a;
  --gl:  #ddbf7a;
  --gd:  rgba(202,165,90,0.10);
  --gb:  rgba(202,165,90,0.20);
  --gbs: rgba(202,165,90,0.38);

  /* Text — all pass 4.5:1 on their typical background */
  --t1:  #f0ece2;   /* 16:1 on --bg  */
  --t2:  #aea79c;   /* 7.1:1 on --bg */
  --t3:  #706860;   /* 4.6:1 on --s1 */

  /* System */
  --green: #52d97e;
  --red:   #e86060;
  --amber: #e8a83a;

  /* Borders */
  --b0: rgba(255,255,255,0.05);
  --b1: rgba(255,255,255,0.09);
  --b2: rgba(255,255,255,0.15);

  /* Shadows */
  --sh: rgba(0,0,0,0.55);

  /* User bubble text */
  --ubbl-text: #1a1008;
}

/* ══════════════════════════════════════════════════════
   DESIGN TOKENS — LIGHT
══════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:  #f5f1e9;
  --s1:  #ffffff;
  --s2:  #eee9de;
  --s3:  #e4ddd0;
  --s4:  #d8d0c0;

  --g:   #7a5018;   /* 6.2:1 on --bg */
  --gl:  #8c6024;
  --gd:  rgba(122,80,24,0.08);
  --gb:  rgba(122,80,24,0.16);
  --gbs: rgba(122,80,24,0.32);

  --t1:  #1c1810;   /* 16:1 on --bg */
  --t2:  #4a4238;   /* 7.4:1 on --bg */
  --t3:  #786e62;   /* 4.7:1 on --s1 */

  --green: #1e8a40;
  --red:   #c02828;
  --amber: #b06808;

  --b0: rgba(0,0,0,0.06);
  --b1: rgba(0,0,0,0.10);
  --b2: rgba(0,0,0,0.18);

  --sh: rgba(0,0,0,0.14);

  --ubbl-text: #f5f1e9;
}
[data-theme="light"] .bubble.user {
  background: var(--g);
  color: var(--ubbl-text);
}