/* ============================================================
   INTELLIGENCE TERMINAL — DESIGN TOKENS v1.0
   Single source of truth for colour, space, type, motion.
   Usage:  <html data-appearance="dark" data-preset="desk">
   Presets: desk | terminal | institutional
   Appearance: dark | light  (or omit + rely on prefers-color-scheme)
   ============================================================ */

:root{
  /* ---- Type scale (1.25 ratio, 14px base for dense UI) ---- */
  --font-sans:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:'JetBrains Mono',Menlo,Consolas,monospace;
  --fs-micro:9px;   --fs-caption:10px; --fs-small:11px;
  --fs-body:13px;   --fs-base:14px;    --fs-lg:16px;
  --fs-h4:18px;     --fs-h3:22px;      --fs-h2:28px;   --fs-h1:36px;
  --lh-tight:1.2;   --lh-normal:1.5;   --lh-loose:1.65;
  --tracking-label:1.8px;
  --w-reg:400; --w-med:500; --w-semi:600; --w-bold:700; --w-black:900;

  /* ---- Spacing scale (4pt) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  /* ---- Radius ---- */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px;

  /* ---- Motion (one easing family = consistent feel) ---- */
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-decel:cubic-bezier(0,0,.2,1);
  --ease-accel:cubic-bezier(.4,0,1,1);
  --ease-spring:cubic-bezier(.34,1.32,.64,1);
  --dur-instant:80ms; --dur-fast:150ms; --dur-base:220ms;
  --dur-slow:360ms;   --dur-slower:700ms;

  /* ---- Elevation ---- */
  --sh-1:0 1px 2px rgba(0,0,0,.28);
  --sh-2:0 4px 14px rgba(0,0,0,.32);
  --sh-3:0 18px 48px rgba(0,0,0,.45);

  /* ---- Layout constants ---- */
  --sidebar-w:218px; --header-h:52px; --ticker-h:32px;
  --grid-max:1180px;

  /* ---- Focus ring (accessibility, never removed) ---- */
  --focus-ring:0 0 0 2px var(--bg), 0 0 0 4px var(--ac);
}

/* ============================================================
   APPEARANCE: DARK (default)
   ============================================================ */
:root,
[data-appearance="dark"]{
  --bg:#09090F; --bg-raised:#0D0E17; --bg-sunken:#06060B;
  --card:rgba(255,255,255,.032);
  --card-hover:rgba(255,255,255,.06);
  --b1:rgba(255,255,255,.065);
  --b2:rgba(255,255,255,.11);
  --tx:#F8FAFC; --tx2:#94A3B8; --tx3:#7C8AA0;
  --gr:#10B981; --grr:16,185,129;
  --rd:#EF4444; --rdr:239,68,68;
  --gold:#F59E0B; --gol:245,158,11;
  --sb:rgba(13,14,23,.96);
  --skeleton-a:rgba(255,255,255,.04);
  --skeleton-b:rgba(255,255,255,.09);
  /* chrome global [P2-6] — dulu hex gelap keras di terminal.css/status-line.css */
  --bg-hdr:rgba(9,9,15,.92); --bg-ticker:rgba(0,0,0,.4); --scrim:rgba(0,0,0,.7); --bg-band:var(--bg-band);
}

/* ============================================================
   APPEARANCE: LIGHT
   ============================================================ */
[data-appearance="light"]{
  --bg:#FFFFFF; --bg-raised:#F9F8F7; --bg-sunken:#F0EFED;
  --card:rgba(15,23,42,.025);
  --card-hover:rgba(15,23,42,.05);
  --b1:rgba(15,23,42,.09);
  --b2:rgba(15,23,42,.16);
  --tx:#1C1D22; --tx2:#5A6270; --tx3:#6B7480;
  --gr:#0F9268; --grr:15,146,104;
  --rd:#D3453B; --rdr:211,69,59;
  --gold:#B8710C; --gol:184,113,12;
  --sb:rgba(249,248,247,.96);
  --skeleton-a:rgba(15,23,42,.05);
  --skeleton-b:rgba(15,23,42,.10);
  --bg-hdr:rgba(255,255,255,.92); --bg-ticker:rgba(15,23,42,.05); --scrim:rgba(15,23,42,.45); --bg-band:rgba(15,23,42,.05);
  --panel:rgba(255,255,255,.97); --neutral:#5A6270; --neutralr:90,98,112;
  --sunk-1:rgba(15,23,42,.03); --sunk-2:rgba(15,23,42,.05); --sunk-3:rgba(15,23,42,.075);
  --tint-1:rgba(15,23,42,.03); --tint-2:rgba(15,23,42,.05); --tint-3:rgba(15,23,42,.08);
  --sh-1:0 1px 2px rgba(0,0,0,.05);
  --sh-2:0 4px 12px rgba(0,0,0,.06);
  --sh-3:0 18px 44px rgba(0,0,0,.10);
}

/* ============================================================
   THEME PRESETS — accent + surface personality
   desk         : calm institutional blue, soft corners
   terminal     : high-contrast green-on-black, square corners, mono-first
   institutional: navy/gold, conservative, print-like
   ============================================================ */
[data-preset="desk"]{
  --ac:#3B82F6; --acr:59,130,246; --ac-soft:rgba(59,130,246,.12);
  --brand-grad:linear-gradient(135deg,#3B82F6,#8B5CF6);
}
[data-preset="terminal"]{
  --ac:#22D07A; --acr:34,208,122; --ac-soft:rgba(34,208,122,.12);
  --brand-grad:linear-gradient(135deg,#22D07A,#0EA5A5);
  --r-xs:2px; --r-sm:3px; --r-md:4px; --r-lg:5px; --r-xl:6px;
  --font-sans:'JetBrains Mono',Menlo,monospace;
  --tracking-label:2.4px;
}
[data-preset="institutional"]{
  --ac:#1E5AA8; --acr:30,90,168; --ac-soft:rgba(30,90,168,.14);
  --brand-grad:linear-gradient(135deg,#1E5AA8,#B8860B);
  --gold:#C9952B; --gol:201,149,43;
  --r-xs:4px; --r-sm:5px; --r-md:6px; --r-lg:8px; --r-xl:10px;
}
[data-preset="institutional"][data-appearance="dark"]{
  --bg:#0A0E16; --bg-raised:#0F1420; --sb:rgba(15,20,32,.96);
}

/* Back-compat: legacy app tokens map onto the new layer */
:root{ --bg1:var(--bg-raised); --bg2:var(--bg-raised); --tx1:var(--tx);
       --fn:var(--font-sans); --mono:var(--font-mono);
       --r1:var(--r-lg); --r2:var(--r-xl); --sbw:var(--sidebar-w); }

/* ============================================================
   APP THEME (data-theme) — SUMBER TUNGGAL AKSEN APLIKASI  [P1-2]
   Dipindah dari :root duplikat di terminal.css (v36).
   Aplikasi memakai atribut data-theme pada <html>, BUKAN
   data-preset. Blok ini diletakkan paling akhir supaya menang
   atas preset dan tetap berlaku untuk SEMUA halaman yang hanya
   memuat tokens.css (index.html, agent-console.html,
   style-guide.html) — sebelumnya --ac tidak terdefinisi di sana.
   ============================================================ */
:root,[data-theme="blue"]{
  --ac:#3B82F6; --acr:59,130,246; --ac-soft:rgba(59,130,246,.12);
}
[data-theme="amber"]{
  --ac:#D97706; --acr:217,119,6; --ac-soft:rgba(217,119,6,.12);
}

/* ---- Global micro-craft ---- */
[data-numeric],.num-tab,table td,table th{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
:where(a,button,[role="button"],[tabindex]):focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ============================================================
   P2 POLISH (v36c) — focus-visible menyeluruh & reduce-motion
   ============================================================ */
:where(.nitem,.btab-item,.hbt,.hamburger,.chip,.mfbtn,.wbtn,.thm-dot,
       .nav-grp,.nvg-hd,.rp-toggle,.tk-btn,.sb-user,.sb-close,
       [data-act],[data-keyact]):focus-visible{
  outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-sm)
}
/* Klik mouse tidak memunculkan ring; keyboard tetap dapat */
:where(a,button,[role="button"],[tabindex],[data-act]):focus:not(:focus-visible){outline:none;box-shadow:none}

@media (prefers-reduced-motion:reduce){
  .sp-rot,.ticker-track,.pulse,.plan-shimmer,.skeleton,.shimmer{animation:none!important}
  .ticker-track{transform:none!important}
  html{scroll-behavior:auto!important}
}

/* Empty state ramah [P2-4] */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:22px 16px;text-align:center;color:var(--tx2);font-size:var(--fs-small);line-height:var(--lh-normal)}
.empty-state .es-ic{font-size:20px;opacity:.75;line-height:1}
.empty-state .es-t{color:var(--tx);font-size:var(--fs-body);font-weight:var(--w-semi)}
.empty-state .es-s{color:var(--tx3)}
.empty-state .es-a{margin-top:2px;color:var(--ac);font-size:var(--fs-small);font-weight:var(--w-semi);
  background:none;border:0;cursor:pointer;padding:2px 4px}
.empty-state .es-a:hover{text-decoration:underline}