/* ═══════════════════════════════════════════════════════════════════
   tokens.css — the design-token layer. Loads BEFORE every other sheet.

   Rules of the layer:
   - Colors, spacing, radii, type sizes, and shadows used anywhere in the
     UI must reference a token defined here. No new raw hex values in
     component CSS; add a token (or use an existing one) instead.
   - Theme switching is token swapping: `:root` holds dark values,
     `html.light` overrides. Never restyle individual elements per theme.
   - Tenant theming (theme.js / appearance.js) overrides --accent and
     friends at runtime; everything referencing tokens follows for free.
   - Direction: never use physical left/right properties in new CSS —
     use logical properties (margin-inline-*, inset-inline-*, text-align:
     start/end) so Arabic RTL is correct by construction.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Base semantic tokens (dark = default, moved from style.css) ── */
:root {
  --bg:          #1f1c19;
  --text:        #eef1f5;
  --muted:       #9ca3af;
  --surface:     #25221e;
  --surface-b:   #36322d;
  --topbar:      rgba(37, 34, 30, 0.80);
  --card:        #25221e;
  --card-b:      #36322d;
  --composer:    #2c2824;
  --composer-b:  #403b35;
  --input-bg:    #1f1c19;
  --input-b:     #36322d;
  --msg-user:    #36322d;
  --msg-user-b:  #4a443d;
  --msg-user-t:  #f5f5f5;
  --msg-bot:     #25221e;
  --msg-bot-b:   #36322d;
  --msg-bot-t:   #e5e7eb;
  --avatar-user: #4a443d;
  --avatar-bot:  #36322d;
  --suggest-bg:  #25221e;
  --suggest-b:   #36322d;
  --toggle-bg:   #25221e;
  --toggle-b:    #36322d;
  --toggle-act:  #403b35;
  --btn-bg:      #1f1c19;
  --btn-b:       #36322d;
  --btn-hover:   #2c2824;
  --composer-toolbar-border: rgba(255, 255, 255, 0.08);
  --accent:          #059669;
  --accent-rgb:      5, 150, 105;
  --chat-font-size:  14px;
  --radius-chat-bubble: 16px;
  --radius-chat-notch:  6px;
  --shadow-chat-assist: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 14px rgba(15, 23, 42, 0.05);
  --code-bg:         #0f172a;
  --code-fg:         #e5e7eb;
  --code-border:     rgba(148, 163, 184, 0.22);
  --code-theme-bg:   #0b0e14;
  --code-theme-fg:   #bfbdb6;
  --code-theme-comment: #5c6773;
  --code-theme-string: #aad94c;
  --code-theme-number: #ffb454;
  --code-theme-keyword: #59c2ff;
  --code-theme-tag:   #f07178;
  --code-theme-attr:  #95e6cb;
  --code-theme-punct: #acb6bf;
  --chat-gap-row:    12px;
  --chat-pad-x:      14px;
  --chat-pad-y:      12px;

  /* ── Status colors ── */
  --ok:          #16a34a;
  --ok-soft:     rgba(22, 163, 74, 0.16);
  --warn:        #f59e0b;
  --warn-soft:   rgba(245, 158, 11, 0.16);
  --danger:      #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.16);
  --info:        #0ea5e9;
  --info-soft:   rgba(14, 165, 233, 0.16);
  --accent-soft: rgba(var(--accent-rgb), 0.14);

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

  /* ── Radii ── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 999px;

  /* ── Type scale ── */
  --text-xs:  0.75rem;   /* 12px */
  --text-sm:  0.8125rem; /* 13px */
  --text-md:  0.875rem;  /* 14px — app default */
  --text-lg:  1rem;      /* 16px */
  --text-xl:  1.125rem;  /* 18px */
  --text-2xl: 1.375rem;  /* 22px */
  --text-3xl: 1.75rem;   /* 28px */

  /* ── Elevation ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.35);

  /* ── Focus ── */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(var(--accent-rgb), 0.55);
}

/* ── Light theme overrides (moved from style.css) ── */
html.light {
  --bg:          #f6f7f9;
  --text:        #1a1d26;
  --muted:       #6b7280;
  --surface:     #ffffff;
  --surface-b:   #e2e5ea;
  --topbar:      rgba(255, 255, 255, 0.85);
  --card:        #ffffff;
  --card-b:      #e2e5ea;
  --composer:    #ffffff;
  --composer-b:  #d1d5db;
  --input-bg:    #f3f4f6;
  --input-b:     #d1d5db;
  --msg-user:    #e8f1ff;
  --msg-user-b:  #bfdbfe;
  --msg-user-t:  #1e3a5f;
  --msg-bot:     #ffffff;
  --msg-bot-b:   #e5e7eb;
  --msg-bot-t:   #1f2937;
  --avatar-user: #dbeafe;
  --avatar-bot:  #e0e7ff;
  --suggest-bg:  #f9fafb;
  --suggest-b:   #e5e7eb;
  --toggle-bg:   #f3f4f6;
  --toggle-b:    #d1d5db;
  --toggle-act:  #d1d5db;
  --btn-bg:      #f3f4f6;
  --btn-b:       #d1d5db;
  --btn-hover:   #e5e7eb;
  --composer-toolbar-border: #eef0f3;
  --code-bg:         #f8fafc;
  --code-fg:         #0f172a;
  --code-border:     #e2e8f0;
  --code-theme-bg:   #f5f7fb;
  --code-theme-fg:   #1f2937;
  --code-theme-comment: #9ca3af;
  --code-theme-string: #16a34a;
  --code-theme-number: #f59e0b;
  --code-theme-keyword: #2563eb;
  --code-theme-tag:   #dc2626;
  --code-theme-attr:  #0ea5e9;
  --code-theme-punct: #64748b;

  /* Status softs read better lighter on light surfaces */
  --ok-soft:     rgba(22, 163, 74, 0.10);
  --warn-soft:   rgba(245, 158, 11, 0.12);
  --danger-soft: rgba(220, 38, 38, 0.10);
  --info-soft:   rgba(14, 165, 233, 0.10);
  --accent-soft: rgba(var(--accent-rgb), 0.10);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 8px 30px rgba(15, 23, 42, 0.12);
}