/* ==========================================================================
   DESIGN TOKENS
   Every colour, size and radius the UI uses lives here. Tweak these first;
   app.css only references variables. Light theme is the base, dark overrides
   follow. No gradients anywhere by design.
   ========================================================================== */

:root {
  /* Type */
  --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", ui-monospace, Menlo, Consolas, monospace;
  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 20px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-tight: 1.25;
  --lh-body: 1.55;
  --tracking-caps: 0.06em;

  /* Spacing scale (4px grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Shape */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 10px;
  --border-w: 1px;

  /* Layout */
  --titlebar-h: 48px; /* 20% taller than before; the Windows overlay height in main.js matches */
  --statusbar-h: 26px;
  --rail-w: 272px; /* room for the house rules on one line each */
  --side-w: 324px;
  --control-h: 28px;
  --control-h-sm: 24px;

  /* Surfaces */
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --surface-3: #ececee;
  --hover: rgba(15, 17, 21, 0.045);
  --active: rgba(15, 17, 21, 0.08);
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --overlay: rgba(10, 11, 13, 0.36);

  /* Text */
  --text: #17181b;
  --text-2: #52555c;
  --text-3: #8a8d94;
  --text-inv: #ffffff;

  /* Brand / accent */
  --accent: #1f5eff;
  --accent-hover: #1a50db;
  --accent-soft: rgba(31, 94, 255, 0.09);
  --focus: rgba(31, 94, 255, 0.35);

  /* Semantic */
  --pos: #0f8a4f;
  --pos-soft: rgba(15, 138, 79, 0.1);
  --neg: #d23a3a;
  --neg-soft: rgba(210, 58, 58, 0.09);
  --warn: #b7791f;
  --warn-soft: rgba(183, 121, 31, 0.11);
  --info: #5b6472;
  --info-soft: rgba(91, 100, 114, 0.1);

  /* Bot identity colours (flat, used for the accent bar + dot) */
  --bot-scanner: #1f5eff;
  --bot-news: #0e8f8f;
  --bot-planner: #7a4df0;
  --bot-risk: #c2410c;
  --bot-skeptic: #be185d;
  --bot-lead: #17181b;

  /* Avatars + swarm */
  --av-ink: #111214;
  --av-gold: #e0a52a;
  --swarm-bg: var(--bg);
  --swarm-dot: rgba(15, 17, 21, 0.09);
  --swarm-orbit: #dcdce0;
  --mb-bg: var(--surface);
  --lg-exec: #0f9d76;

  /* Elevation (flat shadows, no blur glow) */
  --shadow-sm: 0 1px 2px rgba(15, 17, 21, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 17, 21, 0.08), 0 1px 3px rgba(15, 17, 21, 0.06);
  --shadow-lg: 0 18px 48px rgba(15, 17, 21, 0.16), 0 2px 6px rgba(15, 17, 21, 0.08);

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 90ms;
  --dur: 160ms;
}

/* Dark theme: follows the OS unless the user forces a theme in Settings
   (main process sets nativeTheme, which drives prefers-color-scheme). */
@media (prefers-color-scheme: dark) {
  :root {
    /* Pitch black: true #000 canvas, surfaces lifted just enough to separate. */
    --bg: #000000;
    --surface: #0a0a0b;
    --surface-2: #111113;
    --surface-3: #1a1a1d;
    --hover: rgba(255, 255, 255, 0.05);
    --active: rgba(255, 255, 255, 0.09);
    --border: #1c1c1f;
    --border-strong: #2a2a2e;
    --overlay: rgba(0, 0, 0, 0.7);

    --text: #ececef;
    --text-2: #a4a7ae;
    --text-3: #6f727a;
    --text-inv: #000000;

    --accent: #4d7fff;
    --accent-hover: #6690ff;
    --accent-soft: rgba(77, 127, 255, 0.14);
    --focus: rgba(77, 127, 255, 0.45);

    --pos: #2fbf71;
    --pos-soft: rgba(47, 191, 113, 0.13);
    --neg: #f0605d;
    --neg-soft: rgba(240, 96, 93, 0.13);
    --warn: #e3a64a;
    --warn-soft: rgba(227, 166, 74, 0.14);
    --info: #9aa2b0;
    --info-soft: rgba(154, 162, 176, 0.12);

    --bot-scanner: #5b8cff;
    --bot-news: #2bb5b5;
    --bot-planner: #9a78ff;
    --bot-risk: #f0773a;
    --bot-skeptic: #ec5c9c;
    --bot-lead: #ececef;

    --av-ink: #000000;
    --av-gold: #f2c14e;
    --swarm-bg: #000000;
    --swarm-dot: rgba(255, 255, 255, 0.07);
    --swarm-orbit: #222226;
    --mb-bg: #000000;
    --lg-exec: #34d399;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
  }
}