/* ══════════════════════════════════════════════════════════════════════════
   MIZAN — design tokens
   Style anchor: Swiss minimalism on a warm paper surface (E-Ink/Paper warmth).
   Every colour pair below was validated with the dataviz palette validator;
   see design-notes.md for the recorded runs.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── type ─────────────────────────────────────────────────────────────── */
  --font-ar: "IBM Plex Sans Arabic", "Noto Kufi Arabic", "Geeza Pro",
             "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-3xs: 0.625rem;   /* 10px  — run-log node ids */
  --fs-2xs: 0.6875rem;  /* 11px  — chips, meta */
  --fs-xs:  0.75rem;    /* 12px  — captions */
  --fs-sm:  0.8125rem;  /* 13px  — secondary */
  --fs-md:  0.875rem;   /* 14px  — dense UI */
  --fs-base:0.9375rem;  /* 15px  — body */
  --fs-lg:  1.0625rem;  /* 17px  — lead */
  --fs-xl:  1.3125rem;  /* 21px  — section heads */
  --fs-2xl: 1.75rem;    /* 28px  — page title */
  --fs-3xl: 2.5rem;     /* 40px  — hero number */

  /* The chat column runs one step down from the rest of the interface, so the
     transcript reads compactly while reports and the dashboard stay large. */
  --fs-chat:     0.875rem;   /* 14px — message body */
  --fs-step:     0.8125rem;  /* 13px — run-log actor name */
  --fs-step-msg: 0.75rem;    /* 12px — run-log status line */

  /* Title bar — the largest type in the product. */
  --fs-title:    1.5rem;     /* 24px */
  --fs-subtitle: 0.9375rem;  /* 15px */

  --rail-w: 16rem;           /* left sidebar */

  /* One measure for the whole chat column — transcript, composer and replay
     bar must share it, or the composer floats wider than the messages. */
  --thread-max: 58rem;
  --dash-max: 76rem;

  /* Arabic needs more leading than Latin. 1.75 body is the floor. */
  --lh-tight: 1.35;
  --lh-snug:  1.55;
  --lh-body:  1.78;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* ── spacing — 8px base unit, standard density ───────────────────────── */
  --space-1: 0.25rem;   /*  4 */
  --space-2: 0.5rem;    /*  8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */

  /* ── radii ───────────────────────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* ── motion — subtle tier: 250–350ms, small offsets ──────────────────── */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-mid: 240ms;
  --dur-slow: 320ms;
  --stagger: 40ms;

  /* ── elevation ───────────────────────────────────────────────────────── */
  --sh-1: 0 1px 2px rgba(28, 26, 21, 0.05);
  --sh-2: 0 2px 8px rgba(28, 26, 21, 0.07);
  --sh-3: 0 10px 32px rgba(28, 26, 21, 0.10);

  --z-base: 1;
  --z-sticky: 10;
  --z-overlay: 100;
  --z-toast: 1000;
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT — surface #FAF9F5 (warm paper)
   ══════════════════════════════════════════════════════════════════════════ */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg:        #faf9f5;
  --surface:   #ffffff;
  --surface-2: #f4f2ea;
  --surface-3: #eceadf;
  --line:      #e6e3d8;
  --line-2:    #d5d1c2;

  --ink:   #1c1a15;  /* 16.5:1 on --bg */
  --ink-2: #56524a;  /*  7.4:1 on --bg */
  --ink-3: #6b665b;  /*  5.4:1 on --bg, 4.7:1 on --surface-3 — floor for text */
  --ink-4: #a9a396;  /* decorative rules and dividers only, never text */

  --accent:      #1f6fd0;
  --accent-ink:  #17539c;
  --accent-soft: #e9f1fc;
  /* Text/icon colour that sits ON a filled accent surface. Dark mode lightens
     the accent, so white would drop to 2.5:1 — it flips to dark ink instead. */
  --on-accent:   #ffffff;

  /* Role colours — categorical, validated in the order
     leader → employee → agent → engine → gate (all six checks PASS). */
  --role-leader:   #7a3596;
  --role-employee: #0e8f63;
  --role-agent:    #1f6fd0;
  --role-engine:   #c25610;
  --role-gate:     #b0387e;
  --role-system:   #56524a;
  --role-human:    #8a621c;

  --brand-a: #1f6fd0;
  --brand-b: #7a3596;

  --role-leader-soft:   #f3ebf8;
  --role-employee-soft: #e7f5ef;
  --role-agent-soft:    #e9f1fc;
  --role-engine-soft:   #fbeee4;
  --role-gate-soft:     #fbebf3;
  --role-system-soft:   #f0eee7;
  --role-human-soft:    #f9f1de;

  /* Status — reserved, never reused as a category colour. */
  --ok:        #16794a;
  --ok-soft:   #e6f4ec;
  --warn:      #9a6206;
  --warn-soft: #fdf1de;
  --crit:      #b02525;
  --crit-soft: #fbeaea;

  /* Chart ink — sequential magnitude uses one hue, light → dark. */
  --seq-1: #cfe0f6;
  --seq-2: #9dc0ec;
  --seq-3: #6a9fe1;
  --seq-4: #3c7fd4;
  --seq-5: #1f6fd0;
  --grid: #e6e3d8;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK — surface #151410 (warm near-black). Selected, not inverted:
   every step re-validated against the dark surface.
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #151410;
  --surface:   #1d1c17;
  --surface-2: #24231d;
  --surface-3: #2d2b24;
  --line:      #33312a;
  --line-2:    #45423a;

  --ink:   #f2f0e9;
  --ink-2: #b8b3a7;
  --ink-3: #9b968a;
  --ink-4: #6b675e; /* dividers only, never text */

  --accent:      #6ea8f0;
  --accent-ink:  #a6c9f7;
  --accent-soft: #1a2738;
  --on-accent:   #0e1a26;

  --role-leader:   #ae55cc;
  --role-employee: #12a574;
  --role-agent:    #3d8fe6;
  --role-engine:   #ce7526;
  --role-gate:     #d9548c;
  --role-system:   #b8b3a7;
  --role-human:    #d3a24a;

  --brand-a: #1f6fd0;
  --brand-b: #7a3596;

  --role-leader-soft:   #2b1e33;
  --role-employee-soft: #10281f;
  --role-agent-soft:    #14243a;
  --role-engine-soft:   #2f2013;
  --role-gate-soft:     #341823;
  --role-system-soft:   #26251f;
  --role-human-soft:    #2e2513;

  --ok:        #45c088;
  --ok-soft:   #12291f;
  --warn:      #d9a648;
  --warn-soft: #2c2313;
  --crit:      #e8736d;
  --crit-soft: #331a19;

  --seq-1: #1e3350;
  --seq-2: #2b4d75;
  --seq-3: #38699b;
  --seq-4: #3d8fe6;
  --seq-5: #6ea8f0;
  --grid: #33312a;

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 2px 8px rgba(0, 0, 0, 0.45);
  --sh-3: 0 10px 32px rgba(0, 0, 0, 0.55);
}

/* Follow the OS unless the user has explicitly chosen a theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:        #151410;
    --surface:   #1d1c17;
    --surface-2: #24231d;
    --surface-3: #2d2b24;
    --line:      #33312a;
    --line-2:    #45423a;

    --ink:   #f2f0e9;
    --ink-2: #b8b3a7;
    --ink-3: #9b968a;
    --ink-4: #6b675e; /* dividers only, never text */

    --accent:      #6ea8f0;
    --accent-ink:  #a6c9f7;
    --accent-soft: #1a2738;
    --on-accent:   #0e1a26;

    --role-leader:   #ae55cc;
    --role-employee: #12a574;
    --role-agent:    #3d8fe6;
    --role-engine:   #ce7526;
    --role-gate:     #d9548c;
    --role-system:   #b8b3a7;
    --role-human:    #d3a24a;

    --brand-a: #1f6fd0;
  --brand-b: #7a3596;

  --role-leader-soft:   #2b1e33;
    --role-employee-soft: #10281f;
    --role-agent-soft:    #14243a;
    --role-engine-soft:   #2f2013;
    --role-gate-soft:     #341823;
    --role-system-soft:   #26251f;
    --role-human-soft:    #2e2513;

    --ok:        #45c088;
    --ok-soft:   #12291f;
    --warn:      #d9a648;
    --warn-soft: #2c2313;
    --crit:      #e8736d;
    --crit-soft: #331a19;

    --seq-1: #1e3350;
    --seq-2: #2b4d75;
    --seq-3: #38699b;
    --seq-4: #3d8fe6;
    --seq-5: #6ea8f0;
    --grid: #33312a;

    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-2: 0 2px 8px rgba(0, 0, 0, 0.45);
    --sh-3: 0 10px 32px rgba(0, 0, 0, 0.55);
  }
}