/* Agent Orchestrator — Colors & Type
   Extracted from gitea-agent-orchestrator/ui (Tailwind config + index.css + usage).
   Palette: slate neutrals + #2563eb blue accent, with pastel semantic chips.
*/

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=IBM+Plex+Sans+JP:wght@400;500;600;700;800&display=swap');

:root {
  /* —— Brand / Accent ———————————————————————— */
  --accent:        #2563eb;  /* blue-600 — primary action, active tab, focus ring */
  --accent-deep:   #1d4ed8;  /* blue-700 — hover on primary button */
  --accent-50:     #eff6ff;
  --accent-100:    #dbeafe;
  --accent-200:    #bfdbfe;
  --accent-500:    #3b82f6;
  --accent-700:    #1d4ed8;

  /* —— Ink / Neutrals (slate scale) ————————————— */
  --ink:           #0f172a;  /* slate-900 — primary text */
  --muted:        #64748b;   /* slate-500 — secondary text */
  --slate-50:     #f8fafc;   /* body surface */
  --slate-100:    #f1f5f9;   /* scrollbar track, chip bg */
  --slate-200:    #e2e8f0;   /* default border */
  --slate-300:    #cbd5e1;
  --slate-400:    #94a3b8;
  --slate-500:    #64748b;
  --slate-600:    #475569;
  --slate-700:    #334155;
  --slate-800:    #1e293b;
  --slate-900:    #0f172a;
  --app-bg:       #f3f6fb;   /* root bg (index.html) */

  /* —— Semantic status tones (from statusTone()) ————
     bg / fg pairs used in status pills and cards. */
  --status-running-bg:   #dcfce7; --status-running-fg:   #166534;  /* green */
  --status-waiting-bg:   #fef9c3; --status-waiting-fg:   #854d0e;  /* amber */
  --status-subtasks-bg:  #e0e7ff; --status-subtasks-fg:  #3730a3;  /* indigo */
  --status-failed-bg:    #fee2e2; --status-failed-fg:    #b91c1c;  /* red */
  --status-succeeded-bg: #dbeafe; --status-succeeded-fg: #1e40af;  /* blue */
  --status-retry-bg:     #fef3c7; --status-retry-fg:     #92400e;  /* amber-deep */
  --status-queued-bg:    #e2e8f0; --status-queued-fg:    #475569;  /* slate */

  /* Message bubbles (ChatMessage.tsx) */
  --bubble-user-bg:   #2563eb;  --bubble-user-fg:   #ffffff;
  --bubble-ask-bg:    #fffbeb;  --bubble-ask-border: #fde68a;  /* amber-50/200 */
  --bubble-result-bg: #f0fdf4;  --bubble-result-border: #bbf7d0; /* green-50/200 */

  /* Log / terminal surface (ProgressTab) */
  --log-bg:   #0f172a;
  --log-fg:   #f1f5f9;

  /* —— Typography ——————————————————————————— */
  --font-sans: 'IBM Plex Sans JP', 'Hiragino Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* UI base is small & dense — 13px body, mobile auto-zooms to 16. */
  --fs-10:  10px;   /* micro labels, version tag */
  --fs-11:  11px;   /* meta, pill labels, timestamps */
  --fs-12:  12px;   /* secondary body, nav labels */
  --fs-13:  13px;   /* DEFAULT body */
  --fs-14:  14px;   /* chat bubble body */
  --fs-15:  15px;   /* chat header */
  --fs-18:  18px;   /* detail title */
  --fs-20:  20px;   /* dialog title (xl) */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     700;  /* used aggressively — even small chips are bold */
  --fw-extra:    800;  /* titles and headers */

  /* —— Radii (very rounded) ————————————————————— */
  --radius-sm:  8px;   /* rounded-lg  — small buttons, selects, log surface */
  --radius-md:  12px;  /* rounded-xl  — DEFAULT card/button/input — everywhere */
  --radius-lg:  16px;  /* rounded-2xl — dialogs, chat bubbles */
  --radius-pill: 9999px; /* status pills, filter tabs, avatar */

  /* —— Shadow system ————————————————————————— */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);       /* card resting */
  --shadow:    0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); /* modal */

  /* —— Spacing scale (Tailwind units × 4) ————————— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* —— Borders ——————————————————————————————— */
  --border-default: 1px solid var(--slate-200);
  --border-active:  1px solid var(--accent);

  /* —— Semantic aliases ———————————————————————— */
  --fg-1: var(--slate-900);
  --fg-2: var(--slate-600);
  --fg-3: var(--slate-500);
  --fg-muted: var(--slate-400);
  --bg-1: #ffffff;
  --bg-2: var(--slate-50);
  --bg-app: var(--app-bg);
  --border: var(--slate-200);
}

/* —— Base type roles ————————————————————————— */
html, body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-app); }
body { font-size: var(--fs-13); }

.h1 { font-size: var(--fs-20); font-weight: var(--fw-extra); color: var(--fg-1); letter-spacing: -0.01em; }
.h2 { font-size: var(--fs-18); font-weight: var(--fw-extra); color: var(--fg-1); }
.h3 { font-size: var(--fs-15); font-weight: var(--fw-bold);  color: var(--fg-1); }
.h4 { font-size: var(--fs-13); font-weight: var(--fw-bold);  color: var(--fg-1); }
.p  { font-size: var(--fs-13); color: var(--fg-2); line-height: 1.55; }
.meta { font-size: var(--fs-11); color: var(--fg-3); }
.micro { font-size: var(--fs-10); color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--fw-bold); }
.mono { font-family: var(--font-mono); }
.code { font-family: var(--font-mono); font-size: var(--fs-12); background: var(--slate-100); padding: 2px 6px; border-radius: 6px; }

/* The signature "Agent Orchestrator" wordmark style used in TopBar */
.wordmark {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
