/* ═══════════════════════════════════════════════════════════════════
   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:          #14172E;
  --text:        #eef1f5;
  --muted:       #9ca3af;
  --surface:     #1A1E38;
  --surface-b:   #2C3150;
  --topbar:      rgba(26, 30, 56, 0.80);
  --card:        #1A1E38;
  --card-b:      #2C3150;
  --composer:    #20243F;
  --composer-b:  #3A4062;
  --input-bg:    #14172E;
  --input-b:     #2C3150;
  --msg-user:    #2C3150;
  --msg-user-b:  #3A4062;
  --msg-user-t:  #f5f5f5;
  --msg-bot:     #1A1E38;
  --msg-bot-b:   #2C3150;
  --msg-bot-t:   #e5e7eb;
  --avatar-user: #3A4062;
  --avatar-bot:  #2C3150;
  --suggest-bg:  #1A1E38;
  --suggest-b:   #2C3150;
  --toggle-bg:   #1A1E38;
  --toggle-b:    #2C3150;
  --toggle-act:  #3A4062;
  --btn-bg:      #14172E;
  --btn-b:       #2C3150;
  --btn-hover:   #20243F;
  --composer-toolbar-border: rgba(255, 255, 255, 0.08);

  /* ── Transcript rhythm and the accent rule ───────────────────────────────
     ZIJ is named for the warp — the ruled structure everything is woven onto —
     and a zij is a table of computed values. The turn keeps its card; what the
     brand contributes is the RULE: --mark-rule is the single weight used for
     the accent edge on an assistant turn, the bar across its top and the
     composer's live edge, so one device marks "this is live" everywhere.
     --turn-gap is the vertical rhythm between turns; --rule/--rule-strong are
     the hairlines that divide without drawing a box. */
  --rule:         #262B4A;
  --rule-strong:  #343A5C;
  --turn-gap:     22px;
  --mark-rule:    2px;

  /* ── Type ────────────────────────────────────────────────────────────
     The ZIJ system. Cairo is the Arabic because it is the Pro Max Gulf
     house Arabic — keeping it means ZIJ's Arabic is identical to the
     parent's on every co-branded surface. Spectral carries display,
     Archivo the UI, IBM Plex Mono the figures.

     Cairo and Archivo were not drawn as a pair, so their metrics do not
     align by themselves: Arabic sets one step larger than its Latin. */
  --font-sans:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-ar:      "Cairo", "Tajawal", "Segoe UI", Tahoma, sans-serif;
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  /* Ink on brass reads at 6.7:1; white on brass is 2.6:1 and fails. */
  --accent-contrast: #14172E;
  /* ZIJ brass (the mark's accent square). Mirrors ZIJ_BRAND_ACCENT in
     bc_agent/settings.py — brand.js overwrites both from the resolved brand. */
  --accent:          #C9973F;
  --accent-rgb:      201, 151, 63;
  --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;
  /* File-kind accents for artifact cards. DELIBERATELY NOT the --code-theme-*
     tokens: those follow the user's syntax-highlighting choice, so a Word card
     came out green under the default lobe-theme (keyword #059669) and was
     indistinguishable from an Excel one. A file type's colour is a fixed
     convention — Word blue, Excel green, PowerPoint orange, PDF red — and must
     not move when someone changes their code theme.
     Lifted for dark surfaces: the print-brand values go muddy on a dark bubble. */
  --file-docx: #5b9bf8;
  --file-xlsx: #34d399;
  --file-pptx: #fb923c;
  --file-pdf:  #f87171;
  --file-generic: #94a3b8;
  --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);

  /* ── Typography (chat-ui-v3) ── */
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Menlo, Consolas,
               "Liberation Mono", monospace;
  --leading-tight:   1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;
  --measure-prose:   48rem; /* chat column width (was hardcoded max-w-3xl) */

  /* ── Terminal surface (live output panes + code_result output) ── */
  --term-bg:     #0b0e14;
  --term-fg:     #c7cbd4;
  --term-dim:    #7d8590;
  --term-b:      #1f242e;
  --term-stderr: #f38b8b;
}

/* ── Light theme overrides (moved from style.css) ── */
html.light {
  --bg:          #F7F6F2;
  --text:        #1a1d26;
  --muted:       #6b7280;
  --surface:     #ffffff;
  --surface-b:   #E5E2DA;
  --topbar:      rgba(255, 255, 255, 0.85);
  --card:        #ffffff;
  --card-b:      #E5E2DA;
  --composer:    #ffffff;
  --composer-b:  #DCD8CE;
  --input-bg:    #FBFAF7;
  --input-b:     #DCD8CE;
  --msg-user:    #F0EDE5;
  --msg-user-b:  #DFDACD;
  --msg-user-t:  #2B2822;
  --msg-bot:     #ffffff;
  --msg-bot-b:   #E5E2DA;
  --msg-bot-t:   #1f2937;
  --avatar-user: #E5E2DA;
  --avatar-bot:  #F2E6CE;
  --suggest-bg:  #FBFAF7;
  --suggest-b:   #E5E2DA;
  --toggle-bg:   #F1EFE9;
  --toggle-b:    #DCD8CE;
  --toggle-act:  #DCD8CE;
  --btn-bg:      #F1EFE9;
  --btn-b:       #DCD8CE;
  --btn-hover:   #E9E6DE;
  --composer-toolbar-border: #EDEAE2;
  --accent-contrast: #14172E;
  --rule:         #E6E3DB;
  --rule-strong:  #D8D3C7;
  --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;
  /* The Office brand colours themselves, on a light ground. */
  --file-docx: #2b579a;
  --file-xlsx: #217346;
  --file-pptx: #c04b28;
  --file-pdf:  #c0292b;
  --file-generic: #64748b;
  --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);

  /* Terminal surfaces stay dark in light mode on purpose (terminal
     convention — output reads as console, not as prose), only the frame
     adapts. */
  --term-b: #d5dae2;
}