/* ============================================================================
   Jengo — design tokens
   ----------------------------------------------------------------------------
   PALETTE SOURCE: the approved Jengo design reference (brand sheet, Sep 2026).

     Primary Green   #071E07   brand surfaces, sidebar, logo ground
     Accent Green    #16A34A   primary buttons, active state, live indicators
     Light Green     #E8F5EC   highlights, tinted backgrounds
     Dark Gray       #1F2937   text, headings
     Medium Gray     #6B7280   secondary text
     Light Gray      #E5E7EB   borders, dividers
     White           #FFFFFF   backgrounds

   Type: Inter — H1 32/Bold, H2 24/Semibold, H3 18/Semibold, Body 14/Regular,
   Caption 12/Regular. Icons: minimal, rounded, 2px stroke (see js/icons.js).

   Tokens are named for ROLE, never for stacking depth. The pre-redesign
   stylesheet named them --bg/--bg2/--bg3, which meant a card in one place and
   a toolbar in another, and left ~40 borders as hardcoded hexes.

   Three theme states, all of which must work:
     1. bare :root                  — light; also the state when the viewer has
                                      expressed no preference at all
     2. prefers-color-scheme: dark  — dark, unless the user explicitly chose
                                      light (hence the :not() guard)
     3. [data-theme="dark"|"light"] — an explicit in-app choice, which must beat
                                      the OS in both directions

   Never declare a colour only inside a media query or a [data-theme] block: in
   the un-stamped state it will not apply, and the UI renders one theme's text
   on the other theme's ground.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ── Brand ────────────────────────────────────────────────────────────── */
  --brand-dark:        #071E07;  /* sidebar, logo ground, inverse surfaces */
  --on-brand:          #f8fbf8;
  --on-brand-muted:    #9aab9a;
  --on-brand-hover:    #12351a;
  --on-brand-active:   #16a34a;

  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --surface-ground:    #f7f8f9;  /* the working area behind panels */
  --surface:           #ffffff;  /* panels, cards, bars */
  --surface-raised:    #ffffff;
  --surface-sunken:    #f3f4f6;  /* inputs, wells, inert chips */
  --surface-hover:     #f9fafb;
  --surface-active:    #f3f4f6;

  /* ── Borders ──────────────────────────────────────────────────────────── */
  --border:            #e5e7eb;  /* Light Gray — borders, dividers */
  --border-strong:     #d1d5db;
  --border-subtle:     #f1f3f5;

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --text:              #1f2937;  /* Dark Gray — text, headings */
  --text-secondary:    #4b5563;
  --text-tertiary:     #6b7280;  /* Medium Gray — 4.8:1 on white, AA */
  --text-inverse:      #ffffff;

  /* ── Accent ───────────────────────────────────────────────────────────── */
  --accent:            #16a34a;  /* primary buttons, active nav, live dot */
  --accent-hover:      #15803d;
  --accent-text:       #15803d;  /* accent as text — 4.9:1 on white */
  --accent-contrast:   #ffffff;
  --accent-subtle:     #e8f5ec;  /* Light Green — highlights, tinted rows */
  --accent-border:     #bbf0cc;

  /* ── AI-generated content ─────────────────────────────────────────────────
     Subtle by design: AI output must be distinguishable from user-authored
     content without looking like system truth. */
  --ai:                #6366f1;
  --ai-text:           #4338ca;
  --ai-subtle:         #eef2ff;
  --ai-border:         #ddd9fe;

  /* ── Semantic ─────────────────────────────────────────────────────────── */
  --success:           #15803d;
  --success-solid:     #16a34a;
  --success-contrast:  #ffffff;
  --success-subtle:    #dcfce7;
  --success-border:    #bbf7d0;

  --danger:            #b91c1c;
  --danger-solid:      #dc2626;
  --danger-contrast:   #ffffff;
  --danger-subtle:     #fee2e2;
  --danger-border:     #fecaca;

  --warning:           #b45309;
  --warning-subtle:    #fef3c7;
  --warning-border:    #fde68a;

  --recording:         #dc2626;

  /* ── Focus ────────────────────────────────────────────────────────────── */
  --focus-ring:        #15803d;
  --focus-ring-offset: #ffffff;

  /* ── Elevation ────────────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(7, 30, 7, .06);
  --shadow-md:  0 1px 3px rgba(7, 30, 7, .06), 0 6px 16px -8px rgba(7, 30, 7, .14);
  --shadow-lg:  0 4px 24px rgba(7, 30, 7, .10), 0 24px 48px -16px rgba(7, 30, 7, .18);
  --scrim:      rgba(7, 30, 7, .45);

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
             Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono",
             Menlo, Consolas, monospace;

  --fs-caption: 0.75rem;    /* 12 — Caption / Regular */
  --fs-body:    0.875rem;   /* 14 — Body / Regular */
  --fs-body-lg: 0.9375rem;  /* 15 — transcript reading */
  --fs-h3:      1.125rem;   /* 18 — H3 / Semibold */
  --fs-h2:      1.5rem;     /* 24 — H2 / Semibold */
  --fs-h1:      2rem;       /* 32 — H1 / Bold */
  --fs-micro:   0.6875rem;  /* 11 — uppercase labels, badges */

  --lh-tight:   1.25;
  --lh-snug:    1.45;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

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

  --tracking-wide: 0.05em;
  --tracking-code: 0.12em;

  /* ── Space (4px base) ─────────────────────────────────────────────────── */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* ── Radii ────────────────────────────────────────────────────────────── */
  --r-sm: 0.25rem;  --r-md: 0.375rem;  --r-lg: 0.5rem;
  --r-xl: 0.75rem;  --r-2xl: 1rem;     --r-full: 999px;

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --ease: cubic-bezier(.2, .6, .3, 1);

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --sidebar-w:     15rem;
  --sidebar-w-sm:  3.75rem;   /* collapsed: icons only */
  --topbar-h:      3.5rem;
  --tabbar-h:      4rem;     /* fixed mobile bottom bar */
  --pane-w:        19rem;     /* participants / intelligence panes */
  --measure:       68ch;
  --content-max:   52rem;
}

/* ── Dark ─────────────────────────────────────────────────────────────────
   Anchored on the brand dark. Declared twice on purpose: once for the OS
   preference (guarded so an explicit light choice still wins), once for the
   explicit dark stamp (so the in-app toggle beats a light OS). The two blocks
   must stay identical. */
@media (prefers-color-scheme: dark) {
  /* Every token defined in :root above must be redefined here, and in the
     [data-theme="dark"] block below, under THE SAME NAME. The AI family was
     once --jengo-* here and --ai-* above: the values existed, nothing used
     them, and Jengo's replies rendered near-white on a dark ground. */
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* ── Surfaces ──────────────────────────────────────────────────────────
       JengoWork's dark theme (read from its live stylesheet, Sep 2026) uses ONE
       colour — slate-900 #0f172a — for the page, cards, lanes, the top bar and
       the sidebar. Separation comes from translucent white borders and hover
       layers, not from a ramp of different solid fills. Ours used a green-black
       ramp, which is why it read as flat black next to JengoWork's blue-black.
       Matching their approach, not just their hex. */
    --surface-ground:   #0f172a;
    --surface:          #0f172a;
    --surface-raised:   #1a2436;   /* modals and popovers still need to lift */
    --surface-sunken:   #ffffff0a;
    --surface-hover:    #ffffff0f;
    --surface-active:   #ffffff14;
    --surface-inverse:  #020617;
    --on-inverse:       #e2e8f0;
    --on-inverse-muted: #94a3b8;

    /* ── Borders: white at low alpha, so they read on any surface ─────── */
    --border:           #ffffff14;
    --border-strong:    #ffffff29;
    --border-subtle:    #ffffff0d;

    /* ── Text ─────────────────────────────────────────────────────────── */
    --text:             #e2e8f0;
    --text-secondary:   #94a3b8;
    --text-tertiary:    #8595ab;   /* JengoWork uses #64748b; lightened to
                                      clear 4.5:1 on #0f172a, which #64748b
                                      does not (3.6:1) */
    --text-inverse:     #0f172a;

    /* ── Accent ───────────────────────────────────────────────────────── */
    --accent:           #22c55e;
    --accent-hover:     #4ade80;
    --accent-text:      #4ade80;
    --accent-contrast:  #052e16;
    --accent-subtle:    #22c55e1f;
    --accent-border:    #22c55e4d;

    --info:             #60a5fa;
    --info-text:        #93c5fd;
    --info-subtle:      #60a5fa1f;
    --info-border:      #60a5fa4d;

    --ai:            #a78bfa;
    --ai-text:       #c4b5fd;
    --ai-subtle:     #a78bfa1f;
    --ai-border:     #a78bfa4d;

    --success:          #4ade80;
    --success-solid:    #16a34a;
    --success-contrast: #f0fdf4;
    --success-subtle:   #4ade801f;
    --success-border:   #4ade804d;

    --danger:           #f87171;
    --danger-solid:     #dc2626;
    --danger-contrast:  #ffffff;
    --danger-subtle:    #f871711f;
    --danger-border:    #f871714d;

    --warning:          #fbbf24;
    --warning-subtle:   #fbbf241f;
    --warning-border:   #fbbf244d;

    --recording:        #f87171;

    --focus-ring:        #4ade80;
    --focus-ring-offset: #0f172a;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 1px 4px rgba(0, 0, 0, .4), 0 0 0 1px #ffffff0d;
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .55);
    --scrim:     rgba(2, 6, 23, .72);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* ── Surfaces ──────────────────────────────────────────────────────────
     JengoWork's dark theme (read from its live stylesheet, Sep 2026) uses ONE
     colour — slate-900 #0f172a — for the page, cards, lanes, the top bar and
     the sidebar. Separation comes from translucent white borders and hover
     layers, not from a ramp of different solid fills. Ours used a green-black
     ramp, which is why it read as flat black next to JengoWork's blue-black.
     Matching their approach, not just their hex. */
  --surface-ground:   #0f172a;
  --surface:          #0f172a;
  --surface-raised:   #1a2436;   /* modals and popovers still need to lift */
  --surface-sunken:   #ffffff0a;
  --surface-hover:    #ffffff0f;
  --surface-active:   #ffffff14;
  --surface-inverse:  #020617;
  --on-inverse:       #e2e8f0;
  --on-inverse-muted: #94a3b8;

  /* ── Borders: white at low alpha, so they read on any surface ─────── */
  --border:           #ffffff14;
  --border-strong:    #ffffff29;
  --border-subtle:    #ffffff0d;

  /* ── Text ─────────────────────────────────────────────────────────── */
  --text:             #e2e8f0;
  --text-secondary:   #94a3b8;
  --text-tertiary:    #8595ab;   /* JengoWork uses #64748b; lightened to
                                    clear 4.5:1 on #0f172a, which #64748b
                                    does not (3.6:1) */
  --text-inverse:     #0f172a;

  /* ── Accent ───────────────────────────────────────────────────────── */
  --accent:           #22c55e;
  --accent-hover:     #4ade80;
  --accent-text:      #4ade80;
  --accent-contrast:  #052e16;
  --accent-subtle:    #22c55e1f;
  --accent-border:    #22c55e4d;

  --info:             #60a5fa;
  --info-text:        #93c5fd;
  --info-subtle:      #60a5fa1f;
  --info-border:      #60a5fa4d;

  --ai:            #a78bfa;
  --ai-text:       #c4b5fd;
  --ai-subtle:     #a78bfa1f;
  --ai-border:     #a78bfa4d;

  --success:          #4ade80;
  --success-solid:    #16a34a;
  --success-contrast: #f0fdf4;
  --success-subtle:   #4ade801f;
  --success-border:   #4ade804d;

  --danger:           #f87171;
  --danger-solid:     #dc2626;
  --danger-contrast:  #ffffff;
  --danger-subtle:    #f871711f;
  --danger-border:    #f871714d;

  --warning:          #fbbf24;
  --warning-subtle:   #fbbf241f;
  --warning-border:   #fbbf244d;

  --recording:        #f87171;

  --focus-ring:        #4ade80;
  --focus-ring-offset: #0f172a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 1px 4px rgba(0, 0, 0, .4), 0 0 0 1px #ffffff0d;
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .55);
  --scrim:     rgba(2, 6, 23, .72);
}

/* ── Speaker identity ─────────────────────────────────────────────────────
   Assigned round-robin by js/people.js so each participant keeps one colour
   across the transcript, the participant list and their avatar. */
:root {
  --speaker-1: #16a34a;
  --speaker-2: #6366f1;
  --speaker-3: #f59e0b;
  --speaker-4: #ec4899;
  --speaker-5: #06b6d4;
  --speaker-6: #8b5cf6;
  --speaker-7: #ef4444;
  --speaker-8: #14b8a6;
}