/* ICS design tokens — extracted from design/ics-design.html (approved 2026-10-29). Shared by every page. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..125,500..800&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+Arabic:wght@400;500;600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
:root{
  /* --- Neutrals (faint green bias, never pure grey) --- */
  --c-bg:#F2F5F1;            /* app canvas behind surfaces */
  --c-surface:#FFFFFF;       /* cards, panes, inputs */
  --c-surface-2:#F8FAF7;     /* table headers, secondary panes */
  --c-sunken:#EAEFE9;        /* wells, chips, skeletons */
  --c-hover:#EEF3ED;         /* row / item hover */
  --c-border:#DCE3DB;
  --c-border-strong:#C2CDC1;
  --c-text:#13201A;          /* primary text */
  --c-text-2:#45544C;        /* secondary text */
  --c-text-3:#5B6962;        /* captions, meta (darkened from #6C7A72 for WCAG 4.5:1 on canvas) */
  --c-text-inv:#FFFFFF;
  /* --- Accent (pine teal) --- */
  --c-accent:#0B6B5C;
  --c-accent-hover:#08584C;
  --c-accent-soft:#DDEEE9;
  --c-accent-ink:#09574B;    /* accent text on soft backgrounds */
  --c-accent-text:#FFFFFF;   /* text on solid accent */
  --c-focus:#2B9C88;
  /* --- Brand gold (logo ring) — AI marks & brand only --- */
  --c-gold:#B9851D;
  --c-gold-soft:#F6ECD5;
  --c-gold-ink:#755210;
  --c-folder:#A27410;        /* folder glyphs (files, picker) */
  /* --- Semantic (order + system states) --- */
  --c-ok:#2E7D32;   --c-ok-soft:#E3F1E1;   --c-ok-ink:#1E5C23;    /* confirmed, completed, connected */
  --c-warn:#B4690E; --c-warn-soft:#FBEED6; --c-warn-ink:#784505;  /* pending, waiting, SLA warning */
  --c-bad:#B42318;  --c-bad-soft:#FBE6E3;  --c-bad-ink:#8A1A12;   /* cancelled, failed, SLA breach */
  --c-info:#2B5FA8; --c-info-soft:#E3EBF7; --c-info-ink:#1D4379;  /* sent, delivered, publishing */
  --c-read:#5A47B5; --c-read-soft:#ECE8FA; --c-read-ink:#40308C;  /* read */
  --c-neu-soft:#ECEFED; --c-neu-ink:#4A5650;                      /* queued, skipped, paused */
  /* --- Sidebar (forest) --- */
  --c-side:#0F2620; --c-side-2:#163229; --c-side-text:#DCE9E3; --c-side-text-2:#8FAAA0; --c-side-active:#21463B; --c-side-border:#22403A;
  /* --- Conversation --- */
  --c-thread:#EDF1EB; --c-bubble-in:#FFFFFF; --c-bubble-out:#D9EEE7; --c-tick-read:#1C7FBF;
  /* --- Charts --- */
  --c-chart-1:#0B6B5C; --c-chart-2:#B9851D; --c-chart-3:#2B5FA8; --c-chart-4:#B4508A; --c-chart-5:#6C7A72; --c-grid:#E4EAE3;
  /* --- Device frame (viewer only) --- */
  --c-bezel:#1B2420; --c-stage:#E6EBE5;
  --c-overlay:rgba(14,24,20,.44);
  --shadow-1:0 1px 2px rgba(16,32,24,.06);
  --shadow-2:0 2px 6px rgba(16,32,24,.06),0 12px 32px rgba(16,32,24,.10);

  /* --- Type --- */
  --font-ui:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Archivo","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; /* use with font-stretch:112% */
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --font-urdu:"IBM Plex Sans Arabic","Noto Naskh Arabic","Geeza Pro",serif;
  --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-base:14px; --fs-lg:16px; --fs-xl:19px; --fs-2xl:23px; --fs-3xl:30px;
  /* --- Spacing (4px grid) --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:48px;
  /* --- Radius --- */
  --r-sm:4px; --r-md:6px; --r-lg:10px; --r-xl:16px; --r-pill:999px;
  /* --- Control sizes --- */
  --h-ctl:32px; --h-ctl-sm:26px; --h-touch:44px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --c-bg:#0B110F; --c-surface:#121A17; --c-surface-2:#161F1C; --c-sunken:#0E1513; --c-hover:#1A2420;
    --c-border:#24302C; --c-border-strong:#34433E;
    --c-text:#E2EBE6; --c-text-2:#A5B4AE; --c-text-3:#8E9E97; --c-text-inv:#0B110F;
    --c-accent:#3DB7A2; --c-accent-hover:#5CC8B5; --c-accent-soft:#11322C; --c-accent-ink:#7FD8C7; --c-accent-text:#05201B; --c-focus:#5CC8B5;
    --c-gold:#D9AB4C; --c-gold-soft:#2C2311; --c-gold-ink:#EBC77C; --c-folder:#D9AB4C;
    --c-ok:#5CB868; --c-ok-soft:#14291A; --c-ok-ink:#93D69C;
    --c-warn:#E2A23E; --c-warn-soft:#2D2210; --c-warn-ink:#F2C67E;
    --c-bad:#F0695D; --c-bad-soft:#33171A; --c-bad-ink:#F6A49C;
    --c-info:#6E9DE2; --c-info-soft:#14223A; --c-info-ink:#A9C5F1;
    --c-read:#9D8CEB; --c-read-soft:#211C3D; --c-read-ink:#C6BBF6;
    --c-neu-soft:#1B2421; --c-neu-ink:#B2BFBA;
    --c-side:#08100D; --c-side-2:#0F1A16; --c-side-text:#D5E3DD; --c-side-text-2:#7F988E; --c-side-active:#16302A; --c-side-border:#18261F;
    --c-thread:#0D1412; --c-bubble-in:#18221F; --c-bubble-out:#113A33; --c-tick-read:#5FB8F0;
    --c-chart-1:#3DB7A2; --c-chart-2:#D9AB4C; --c-chart-3:#6E9DE2; --c-chart-4:#D47AAE; --c-chart-5:#8C9C95; --c-grid:#1F2A26;
    --c-bezel:#000000; --c-stage:#060A09;
    --c-overlay:rgba(0,0,0,.62);
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 2px 6px rgba(0,0,0,.4),0 14px 36px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --c-bg:#0B110F; --c-surface:#121A17; --c-surface-2:#161F1C; --c-sunken:#0E1513; --c-hover:#1A2420;
  --c-border:#24302C; --c-border-strong:#34433E;
  --c-text:#E2EBE6; --c-text-2:#A5B4AE; --c-text-3:#8E9E97; --c-text-inv:#0B110F;
  --c-accent:#3DB7A2; --c-accent-hover:#5CC8B5; --c-accent-soft:#11322C; --c-accent-ink:#7FD8C7; --c-accent-text:#05201B; --c-focus:#5CC8B5;
  --c-gold:#D9AB4C; --c-gold-soft:#2C2311; --c-gold-ink:#EBC77C; --c-folder:#D9AB4C;
  --c-ok:#5CB868; --c-ok-soft:#14291A; --c-ok-ink:#93D69C;
  --c-warn:#E2A23E; --c-warn-soft:#2D2210; --c-warn-ink:#F2C67E;
  --c-bad:#F0695D; --c-bad-soft:#33171A; --c-bad-ink:#F6A49C;
  --c-info:#6E9DE2; --c-info-soft:#14223A; --c-info-ink:#A9C5F1;
  --c-read:#9D8CEB; --c-read-soft:#211C3D; --c-read-ink:#C6BBF6;
  --c-neu-soft:#1B2421; --c-neu-ink:#B2BFBA;
  --c-side:#08100D; --c-side-2:#0F1A16; --c-side-text:#D5E3DD; --c-side-text-2:#7F988E; --c-side-active:#16302A; --c-side-border:#18261F;
  --c-thread:#0D1412; --c-bubble-in:#18221F; --c-bubble-out:#113A33; --c-tick-read:#5FB8F0;
  --c-chart-1:#3DB7A2; --c-chart-2:#D9AB4C; --c-chart-3:#6E9DE2; --c-chart-4:#D47AAE; --c-chart-5:#8C9C95; --c-grid:#1F2A26;
  --c-bezel:#000000; --c-stage:#060A09;
  --c-overlay:rgba(0,0,0,.62);
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 2px 6px rgba(0,0,0,.4),0 14px 36px rgba(0,0,0,.45);
  color-scheme:dark;
}
:root[data-theme="light"]{color-scheme:light}