/* tokens.css — design tokens tema "dark minimal" (terinspirasi estetika Manus).
   Palet charcoal yang tenang + aksen biru hanya untuk aksi/status aktif.
   Semua komponen memakai variabel ini; jangan hardcode warna di CSS lain. */
:root {
  color-scheme: dark;

  /* Latar & permukaan (hierarki via kecerahan, bukan warna) */
  --bg: #18191B;            /* latar utama */
  --side: #1F2022;          /* sidebar */
  --surface: #222325;       /* kartu/panel */
  --surface2: #252628;      /* permukaan raised (chip, sug, dsb.) */
  --topbar: #202123;        /* topbar app & chat */
  --composer-shell: #1E1F21; /* panel luar composer (sedikit di atas --bg) */
  --composer-box: #242528;   /* kotak input di dalam shell */
  --composer-chip: #B6B8BD;  /* label chip Cloud / Pilih proyek */
  --composer-send: #33353A;  /* tombol kirim saat idle (referensi #353535) */
  --composer-line: #353639;       /* border shell luar composer */
  --composer-line-inner: #313234; /* border kotak input di dalam shell */
  --composer-ph: #777A80;         /* placeholder composer */
  --composer-send-ink: #7E8187;   /* panah kirim saat idle (referensi #595959) */
  --bubble-user: #292A2D;
  --bubble-assistant: #252628;
  --surface3: #2B2C2F;     /* hover */
  --bg-hover: #2B2C2F;

  /* Border */
  --line: #303134;          /* halus */
  --border-subtle: #303134;
  --line-strong: #3A3B3E;  /* tegas */
  --border-strong: #3A3B3E;

  /* Teks */
  --ink: #E6E7E9;          /* utama */
  --text-primary: #E6E7E9;
  --muted: #A4A6AA;        /* sekunder */
  --text-secondary: #A4A6AA;
  --faint: #8C8F95;        /* redup — 4.85:1 di permukaan panel */

  /* Aksen biru. Tiga peran, tiga nilai — satu biru tidak bisa lolos kontras
     sekaligus untuk teks, isian tombol, dan penanda data:
       --accent       penanda data & garis 1px (non-teks, 4.4:1 di panel)
       --accent-text  tautan/label di atas permukaan gelap (6.3:1)
       --accent-fill  isian tombol utama; teks putih di atasnya 4.8:1
     Memakai satu nilai untuk ketiganya membuat label tautan gagal 4.5:1. */
  --accent: #2589E8;
  --accent-text: #5EA9F4;
  --accent-fill: #1E74C8;
  --accent-hi: #3999F2;
  --accent-ink: #FFFFFF;
  --menu-fg: #F2F3F5;

  /* Tab panel kanan — sengaja terang & agak kotak (permintaan produk) */
  --rail-tab: #B9BDC3;
  --rail-tab-hover: #A7ACB3;
  --rail-tab-active: #989EA6;
  --rail-tab-ink: #141518;
  --rail-tab-ink-strong: #0F1012;
  --rail-tab-box: rgba(15, 18, 20, 0.10);
  --rail-tab-box-hover: rgba(15, 18, 20, 0.14);
  --rail-tab-close: #3A3D41;

  /* Semantik (status) */
  --warn: #E0A23D;
  --danger: #E25C5C;
  --danger-text: #F0A8A8;   /* teks error di atas surface gelap (7.1:1) */
  --ok: #35B789;
  --info: #3999F2;

  /* Radius & elevasi */
  --radius: 12px;
  --radius-sm: 9px;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
  --ring: 0 0 0 3px rgba(37, 137, 232, 0.28);

  /* Alias gaya referensi (nav/footer site.css) */
  --panel: var(--surface);
  --surface-hover: var(--surface3);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --text-1: var(--ink);
  --text-2: var(--muted);
  --text-3: var(--faint);
  --brand: var(--accent);
  --icon-accent: var(--accent);
  --radius-md: var(--radius);
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Tipografi modern sans-serif */
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-ui);
  --font-brand: "Baloo 2", var(--font-ui);
  --font-body: var(--font-ui);
  --sidebar-width: 297px;
  --chat-max-width: 960px;

  /* Kartu profil login: pudar dasar potret agar menyatu dengan badan kartu. */
  --pcard-fade: rgba(20, 21, 23, 0.72);
  --pcard-fade-h: 34%;

  /* Latar dekoratif chat kosong (mozaik wireframe UI).
     Hanya dipakai #chatPane.is-empty; halaman lain tidak memakainya. */
  --chat-mosaic: url("/icons/bg-chat-mosaic.svg");
  --chat-mosaic-opacity: 0.40;
  /* Dua lapis: elips tengah (konten utama tetap bersih) + pudar ke bawah
     (area composer & catatan AI tidak boleh berebut perhatian). */
  --chat-mosaic-mask: radial-gradient(
      ellipse 62% 62% at 50% 42%,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.2) 55%,
      #000 100%
    ),
    linear-gradient(to bottom, #000 0%, #000 66%, rgba(0, 0, 0, 0.45) 84%, transparent 100%);
  /* Halaman penuh di body (tabel/daftar butuh lebih lebar dari chat) */
  --page-max-width: 1240px;
}

/* ===== Light theme (tetap fungsional, palet abu-abu dingin + biru) ===== */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #F5F6F8;
  --side: #FFFFFF;
  --surface: #FFFFFF;
  --surface2: #EDEFF2;
  --topbar: #FFFFFF;
  --composer-shell: #EFF1F4;
  --composer-box: #FFFFFF;
  --composer-chip: #4C5057;
  --composer-send: #DDE1E7;
  --composer-line: #D3D8DE;
  --composer-line-inner: #DDE1E7;
  --composer-ph: #6B7078;
  --composer-send-ink: #5F646B;
  --bubble-user: #E8EAEE;
  --bubble-assistant: #FFFFFF;
  --surface3: #E5E8EC;
  --bg-hover: #E5E8EC;
  --line: #E2E5E9;
  --border-subtle: #E2E5E9;
  --line-strong: #C7CBD2;
  --border-strong: #C7CBD2;
  --ink: #191A1C;
  --text-primary: #191A1C;
  --muted: #45494F;
  --text-secondary: #45494F;
  --faint: #6B7078;
  --accent: #257FD9;
  --accent-text: #1A5FA8;
  --accent-fill: #257FD9;
  --accent-hi: #2E8FE8;
  --accent-ink: #FFFFFF;
  --menu-fg: #202124;
  --rail-tab: #DCE0E6;
  --rail-tab-hover: #CFD4DB;
  --rail-tab-active: #C2C8D0;
  --rail-tab-ink: #141518;
  --rail-tab-ink-strong: #0F1012;
  --rail-tab-box: rgba(15, 18, 20, 0.08);
  --rail-tab-box-hover: rgba(15, 18, 20, 0.13);
  --rail-tab-close: #4A4E55;
  --warn: #B47A1E;
  --danger: #C14444;
  --danger-text: #A32828;
  --ok: #1F9D67;
  --info: #2E8FE8;
  --shadow: 0 16px 40px rgba(23, 26, 32, 0.10);
  --ring: 0 0 0 3px rgba(37, 127, 217, 0.22);
  /* Mozaik tetap ada di light theme, tapi sangat pudar: garis gelap di atas
     latar putih cepat terlihat seperti noda, bukan tekstur. */
  --chat-mosaic-opacity: 0.1;
  /* Light: foto berakhir keras di atas badan kartu putih — pudar putih di
     atas foto gelap justru terlihat seperti kabut. */
  --pcard-fade: transparent;
  --pcard-fade-h: 0;
}
html[data-theme="light"] body { background: var(--bg); }