/* ==========================================================================
   Design tokens — botOps
   Arah visual: kanvas terang, panel besar membulat, kartu putih bergaris tipis, satu aksen biru,
   status selalu bertulisan (titik warna hanya penguat). Satu-satunya tempat warna/ukuran ditulis.
   ========================================================================== */

/* Plus Jakarta Sans (SIL OFL 1.1, assets/fonts/OFL.txt), di-host sendiri: variabel 200–800. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* ---- Aksen (biru) ---- */
  --blue-50: #eef4ff;
  --blue-100: #dce8ff;
  --blue-200: #bcd2ff;
  --blue-300: #8fb3ff;
  --blue-400: #5c8dfa;
  --blue-500: #3b76f6;
  --blue-600: #2563eb; /* primary: putih di atasnya 5,2:1 */
  --blue-700: #1d4fd8;
  --blue-800: #1e40af;

  /* ---- Netral dingin (satu keluarga abu) ---- */
  --navy-900: #141821; /* teks utama */
  --slate-800: #262c38;
  --slate-700: #3a4150;
  --slate-600: #4f5768;
  --slate-500: #4f5768; /* teks sekunder: ≥6,4:1 di semua permukaan */
  --slate-450: #5f6777; /* teks redup: ≥5:1 di semua permukaan */
  --slate-400: #7d8696; /* ikon bermakna: ≥3,3:1 */
  --slate-300: #c9ced8;
  --slate-200: #dfe3ea;
  --slate-150: #e8ebf0;
  --slate-100: #f0f2f5;
  --slate-50: #f6f7f9;

  /* ---- Nada: bg (isian lembut) / fg (teks, AA di bg, putih dan kanvas) / solid (titik, batang, grafik) ---- */
  --tone-blue-bg: #eaf1ff;
  --tone-blue-fg: #1d4fd8;
  --tone-blue-solid: #3b76f6;

  --tone-sky-bg: #e4f3fb;
  --tone-sky-fg: #0b628f;
  --tone-sky-solid: #0ea5e9;

  --tone-teal-bg: #e2f6f2;
  --tone-teal-fg: #0d6e66;
  --tone-teal-solid: #14b8a6;

  --tone-green-bg: #e7f6ec;
  --tone-green-fg: #12703a;
  --tone-green-solid: #22a35a;

  --tone-amber-bg: #fff3d9;
  --tone-amber-fg: #8f5200;
  --tone-amber-solid: #f2a516;

  --tone-orange-bg: #ffeee4;
  --tone-orange-fg: #a8430d;
  --tone-orange-solid: #f97316;

  --tone-red-bg: #fdeceb;
  --tone-red-fg: #bb2f26;
  --tone-red-solid: #e5483d;

  --tone-purple-bg: #f1ecff;
  --tone-purple-fg: #6537cf;
  --tone-purple-solid: #8b5cf6;

  --tone-pink-bg: #fdeaf4;
  --tone-pink-fg: #a8215f;
  --tone-pink-solid: #ec4899;

  --tone-slate-bg: #eff1f4;
  --tone-slate-fg: #4f5768;
  --tone-slate-solid: #9aa2b1;

  /* ---- Tahap pipeline (chevron, titik kanban) ---- */
  --stage-1: #2563eb; /* Baru */
  --stage-2: #1ba5e0; /* Qualified */
  --stage-3: #3fcfbc; /* Dihubungi */
  --stage-4: #f6c443; /* Membalas */
  --stage-5: #c3b1f7; /* Demo/Trial */
  --stage-6: #34c17a; /* Pelanggan */
  --stage-lost: #c9ced8; /* Tidak tertarik */

  /* ---- Warna identitas bot lama ---- */
  --bot-job: var(--tone-blue-solid);
  --bot-research: var(--tone-teal-solid);
  --bot-outbound: var(--tone-amber-solid);
  --bot-content: var(--tone-purple-solid);
  --bot-pantau: var(--tone-orange-solid);
  --bot-chief: var(--tone-sky-solid);

  /* ---- Permukaan & alias semantik ---- */
  --canvas: #f3f4f7; /* latar aplikasi */
  --bg: var(--canvas);
  --surface-panel: #f9fafb; /* panel besar pembungkus seksi */
  --surface: #ffffff; /* kartu, baris, kontrol */
  --surface-muted: #f7f8fa;
  --surface-sunken: #eff1f5;
  --surface-inverse: var(--navy-900);
  --text-inverse: #ffffff;
  --border: #e6e9ef; /* garis rambut kartu dan pemisah */
  --border-strong: #d5dae3;
  --border-control: #848d9c; /* batas input/select: ≥3:1 di putih dan kanvas */
  --text: var(--navy-900);
  --text-secondary: var(--slate-500);
  --text-muted: var(--slate-450);
  --icon-muted: var(--slate-400);
  --primary: var(--blue-600);
  --primary-hover: var(--blue-700);
  --primary-soft: var(--blue-50);
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.3);
  --backdrop: rgba(20, 24, 33, 0.36);
  --hover-tint: rgba(20, 24, 33, 0.04);
  --dot-grid: rgba(125, 134, 150, 0.22); /* titik kanvas diagram */
  --wa-bubble-bg: #e7f8e9; /* pratinjau gelembung WhatsApp */
  --wa-bubble-fg: #123524;

  /* ---- Warna peran agent (ikon bulat, aksen node) ---- */
  --role-planner-bg: var(--tone-purple-bg);
  --role-planner-fg: var(--tone-purple-fg);
  --role-researcher-bg: var(--tone-green-bg);
  --role-researcher-fg: var(--tone-green-fg);
  --role-sales-bg: var(--tone-blue-bg);
  --role-sales-fg: var(--tone-blue-fg);
  --role-marketing-bg: var(--tone-pink-bg);
  --role-marketing-fg: var(--tone-pink-fg);
  --role-critic-bg: var(--tone-amber-bg);
  --role-critic-fg: var(--tone-amber-fg);
  --role-report-bg: var(--tone-slate-bg);
  --role-report-fg: var(--tone-slate-fg);

  /* ---- Tipografi ---- */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", monospace;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 34px;
  --text-display: 40px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-caps: 0.08em;
  --leading-tight: 1.2;
  --leading-normal: 1.55;

  /* ---- Radius: makin luar makin lembut ---- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px; /* kontrol */
  --radius-lg: 16px; /* baris-kartu, kartu kecil */
  --radius-xl: 20px; /* kartu */
  --radius-2xl: 28px; /* panel besar */
  --radius-full: 999px;

  /* ---- Bayangan bernuansa tinta, satu arah cahaya (atas) ---- */
  --shadow-xs: 0 1px 1px rgba(20, 24, 33, 0.03);
  --shadow-sm: 0 1px 2px rgba(20, 24, 33, 0.04), 0 1px 1px rgba(20, 24, 33, 0.02);
  --shadow-md: 0 6px 16px rgba(20, 24, 33, 0.06), 0 1px 3px rgba(20, 24, 33, 0.04);
  --shadow-lg: 0 24px 48px rgba(20, 24, 33, 0.14), 0 4px 12px rgba(20, 24, 33, 0.06);
  --shadow-primary: 0 6px 14px -6px rgba(37, 99, 235, 0.55);
  --shadow-thumb: 0 1px 2px rgba(20, 24, 33, 0.3);
  --glow-running: 0 0 0 4px rgba(59, 118, 246, 0.14);

  /* ---- Jarak (skala 4px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---- Tata letak ---- */
  --rail-w: 64px;
  --sidebar-w: var(--rail-w);
  --sidebar-w-collapsed: var(--rail-w);
  --drawer-w: 300px;
  --topbar-h: 76px; /* 14 + pil 48 + 14 */
  --shell-pad: 20px;
  --content-max: 1600px;
  --gap: 20px;
  --panel-pad: 28px;
  --target-min: 44px;

  /* ---- Ponsel: safe area (butuh viewport-fit=cover) dan tab bar bawah (< 1024px) ---- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --tabbar-h: 64px;
  --tabbar-gap: 10px; /* jarak tab bar mengambang dari tepi bawah */
  --tabbar-space: calc(var(--tabbar-h) + var(--tabbar-gap) + var(--safe-bottom));

  /* ---- Lapisan ---- */
  --z-sticky: 20;
  --z-header: 30;
  --z-rail: 35;
  --z-tabbar: 40;
  --z-backdrop: 45;
  --z-drawer: 50;
  --z-dropdown: 60;
  --z-tooltip: 65;
  --z-toast: 80;
  --z-skip: 90;

  /* ---- Komponen bergaya shadcn/ui (css/ui.css): nama token shadcn dipetakan ke palet di atas ---- */
  --ui-radius-sm: var(--radius-xs); /* 6px: badge, item listbox, kbd */
  --ui-radius-md: var(--radius-sm); /* 8px: tombol, input, pemicu select, popover, hari kalender */
  --ui-radius-lg: 10px; /* ikon kartu, empty state */
  --ui-radius-xl: 14px; /* kartu */
  --ui-control-h: 36px; /* tinggi tombol dan kontrol; 44px di layar sentuh (ui.css) */
  --ui-control-h-sm: 32px;
  --ui-item-h: 32px; /* opsi listbox Select; 44px di layar sentuh (ui.css) */
  --ui-calendar-cell: 36px;
  --ui-space-1-5: 6px;
  --ui-foreground: var(--text);
  --ui-muted: var(--slate-100);
  --ui-muted-foreground: var(--text-secondary);
  --ui-accent: var(--slate-100); /* sorot hover dan item aktif */
  --ui-secondary: var(--slate-100);
  --ui-secondary-hover: var(--slate-150);
  --ui-border-button: var(--border-strong); /* tombol outline */
  --ui-input: var(--border-control); /* batas kontrol ≥3:1 (shadcn memakai abu lebih muda) */
  --ui-ring: var(--focus-ring);
  --ui-overlay: rgb(0 0 0 / 0.5); /* latar di belakang sheet (bg-black/50) */
  --ui-shadow-toast: 0 4px 12px rgb(0 0 0 / 0.1); /* bayangan toast Sonner */

  /* ---- Gerak ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 120ms;
  --duration: 180ms;
  --duration-slow: 260ms;
}

/* Tone helpers: set --tone-bg / --tone-fg / --tone-solid for any component */
.tone-blue { --tone-bg: var(--tone-blue-bg); --tone-fg: var(--tone-blue-fg); --tone-solid: var(--tone-blue-solid); }
.tone-sky { --tone-bg: var(--tone-sky-bg); --tone-fg: var(--tone-sky-fg); --tone-solid: var(--tone-sky-solid); }
.tone-teal { --tone-bg: var(--tone-teal-bg); --tone-fg: var(--tone-teal-fg); --tone-solid: var(--tone-teal-solid); }
.tone-green { --tone-bg: var(--tone-green-bg); --tone-fg: var(--tone-green-fg); --tone-solid: var(--tone-green-solid); }
.tone-amber { --tone-bg: var(--tone-amber-bg); --tone-fg: var(--tone-amber-fg); --tone-solid: var(--tone-amber-solid); }
.tone-orange { --tone-bg: var(--tone-orange-bg); --tone-fg: var(--tone-orange-fg); --tone-solid: var(--tone-orange-solid); }
.tone-red { --tone-bg: var(--tone-red-bg); --tone-fg: var(--tone-red-fg); --tone-solid: var(--tone-red-solid); }
.tone-purple { --tone-bg: var(--tone-purple-bg); --tone-fg: var(--tone-purple-fg); --tone-solid: var(--tone-purple-solid); }
.tone-pink { --tone-bg: var(--tone-pink-bg); --tone-fg: var(--tone-pink-fg); --tone-solid: var(--tone-pink-solid); }
.tone-slate { --tone-bg: var(--tone-slate-bg); --tone-fg: var(--tone-slate-fg); --tone-solid: var(--tone-slate-solid); }

/* Agent role → tone (ikon bulat, aksen node) */
.role-planner { --tone-bg: var(--role-planner-bg); --tone-fg: var(--role-planner-fg); --tone-solid: var(--tone-purple-solid); }
.role-researcher { --tone-bg: var(--role-researcher-bg); --tone-fg: var(--role-researcher-fg); --tone-solid: var(--tone-green-solid); }
.role-sales { --tone-bg: var(--role-sales-bg); --tone-fg: var(--role-sales-fg); --tone-solid: var(--tone-blue-solid); }
.role-marketing { --tone-bg: var(--role-marketing-bg); --tone-fg: var(--role-marketing-fg); --tone-solid: var(--tone-pink-solid); }
.role-critic { --tone-bg: var(--role-critic-bg); --tone-fg: var(--role-critic-fg); --tone-solid: var(--tone-amber-solid); }
.role-report { --tone-bg: var(--role-report-bg); --tone-fg: var(--role-report-fg); --tone-solid: var(--tone-slate-solid); }

/* Bot identity → tone mapping */
.bot-job { --tone-bg: var(--tone-blue-bg); --tone-fg: var(--tone-blue-fg); --tone-solid: var(--bot-job); }
.bot-research { --tone-bg: var(--tone-teal-bg); --tone-fg: var(--tone-teal-fg); --tone-solid: var(--bot-research); }
.bot-outbound { --tone-bg: var(--tone-amber-bg); --tone-fg: var(--tone-amber-fg); --tone-solid: var(--bot-outbound); }
.bot-content { --tone-bg: var(--tone-purple-bg); --tone-fg: var(--tone-purple-fg); --tone-solid: var(--bot-content); }
.bot-pantau { --tone-bg: var(--tone-orange-bg); --tone-fg: var(--tone-orange-fg); --tone-solid: var(--bot-pantau); }
.bot-chief { --tone-bg: var(--tone-sky-bg); --tone-fg: var(--tone-sky-fg); --tone-solid: var(--bot-chief); }

/* Job source → tone mapping (text chips, no brand logos) */
.src-jobstreet { --tone-bg: var(--tone-purple-bg); --tone-fg: var(--tone-purple-fg); --tone-solid: var(--tone-purple-solid); }
.src-glints { --tone-bg: var(--tone-orange-bg); --tone-fg: var(--tone-orange-fg); --tone-solid: var(--tone-orange-solid); }
.src-linkedin { --tone-bg: var(--tone-blue-bg); --tone-fg: var(--tone-blue-fg); --tone-solid: var(--tone-blue-solid); }
.src-indeed { --tone-bg: var(--tone-sky-bg); --tone-fg: var(--tone-sky-fg); --tone-solid: var(--tone-sky-solid); }
.src-threads { --tone-bg: var(--tone-slate-bg); --tone-fg: var(--navy-900); --tone-solid: var(--navy-900); }

/* Pipeline stage → color mapping (for dots, chevrons, kanban columns) */
.stage-1 { --seg: var(--stage-1); }
.stage-2 { --seg: var(--stage-2); }
.stage-3 { --seg: var(--stage-3); }
.stage-4 { --seg: var(--stage-4); }
.stage-5 { --seg: var(--stage-5); }
.stage-6 { --seg: var(--stage-6); }
.stage-lost { --seg: var(--stage-lost); }