/* ═══════════════════════════════════════════════════════════════════════════
 * NOVA — FRAZIER × Sentaris Workspace, sistem desain v3 (B5)
 * ───────────────────────────────────────────────────────────────────────────
 * Aturan merek lama (HITAM / PUTIH / SILVER) DICABUT atas permintaan pemilik.
 * Identitas baru mengikuti lembar referensi "Modern Dashboard Design System":
 * permukaan gelap berlapis + satu aksen hijau limau, huruf Inter, kisi 8px,
 * ikon garis luar, sudut lembut.
 *
 * Berkas ini HANYA memegang token. Aturan komponen ada di nova-ui.css,
 * aturan kulit aplikasi di nova-shell.css. Dimuat SESUDAH styles.css /
 * ops-theme.css / brand.css, jadi `:root` di sini menang atas `:root` di sana.
 *
 * Sistem skin B4 (blok / lega / kontras / padat) DICABUT pada B5 atas
 * permintaan pemilik: kelimanya terlalu mirip satu sama lain dan tidak satu
 * pun benar-benar mewakili arah desain ini. Sekarang hanya ada SATU sistem.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Palet mentah referensi ─────────────────────────────────────────────────
   Nilai-nilai ini tidak dipakai langsung oleh komponen; ia sumber turunan
   di bawah supaya satu perubahan warna merek menyebar ke seluruh aplikasi. */
:root {
  --nv-lime:        #A3FF4D;   /* Primary      */
  --nv-lime-deep:   #16A34A;   /* Primary Dark */
  --nv-lime-ink:    #2E7D12;   /* teks aksen di atas permukaan TERANG (5,2:1 vs putih) */
  --nv-lime-line:   #3F9C1B;   /* garis aksen di atas permukaan TERANG (3,5:1 vs putih) */
  --nv-bg:          #0B0F0D;   /* Background   */
  --nv-surface:     #11161A;   /* Surface      */
  --nv-card:        #1A1F24;   /* Card         */
  --nv-border:      #2A3138;   /* Border       */
  --nv-ink:         #F9FAFB;   /* Text Primary */
  --nv-ink-2:       #9CA3AF;   /* Text Secondary */
  --nv-success:     #22C55E;
  --nv-error:       #EF4444;
  --nv-warning:     #F59E0B;
  --nv-info:        #3B82F6;
  --nv-violet:      #8B5CF6;   /* kartu "Pro Plan" pada referensi */

  /* Gradien isian aksen — dipakai bar progres, bagan, dan mark logo. */
  --nv-grad:        linear-gradient(90deg, #A3FF4D 0%, #16A34A 100%);
  --nv-grad-d:      linear-gradient(135deg, #C8FF8A 0%, #A3FF4D 38%, #16A34A 100%);
}

/* ═══ TEMA TERANG ═══════════════════════════════════════════════════════════
   Referensi adalah sistem gelap. Tema terang adalah terjemahan setia:
   permukaan dibalik, aksen hijau DIPERTAHANKAN sebagai isian (tinta gelap di
   atasnya = 16:1) tetapi teks/garis aksen memakai turunan hijau tua supaya
   tetap terbaca. Hijau limau tidak pernah menjadi warna teks di sini. */
:root, [data-theme="light"] {
  --xcs-navy:        #11161A;   /* sidebar — gelap di KEDUA tema, seperti referensi */
  --xcs-navy-2:      #1A1F24;
  --xcs-navy-3:      #232A30;
  --xcs-yellow:      #A3FF4D;   /* nama token lama; isinya sekarang aksen limau */
  --xcs-yellow-soft: rgba(163, 255, 77, .28);
  --xcs-chrome:      var(--nv-grad-d);

  --xcs-bg-1:        #F1F4F1;
  --xcs-bg-2:        #FFFFFF;
  --xcs-bg-3:        #E6EAE6;
  --xcs-bg-tint:     #F7F9F7;

  --xcs-ink-1:       #0B0F0D;
  --xcs-ink-2:       #39423C;
  --xcs-ink-3:       #626C66;
  --xcs-ink-4:       #767F79;
  --xcs-ink-on-brand:#FFFFFF;

  --xcs-line-1:      #E0E5E0;
  --xcs-line-2:      #C6CDC7;
  --xcs-line-focus:  #3F9C1B;

  --xcs-blue:        #2E7D12;   /* dulu "primary blue" → sekarang tinta aksen */
  --xcs-blue-soft:   rgba(163, 255, 77, .22);
  --xcs-blue-fg:     #245F0E;
  --xcs-green:       #15803D;   /* 5,0:1 vs putih — #1B8A45 hanya 4,4:1 */
  --xcs-green-soft:  rgba(34, 197, 94, .16);
  --xcs-orange:      #9A6206;
  --xcs-orange-soft: rgba(245, 158, 11, .18);
  --xcs-red:         #C7302F;
  --xcs-red-soft:    rgba(239, 68, 68, .14);
  --xcs-violet:      #6D3BD4;
  --xcs-violet-soft: rgba(139, 92, 246, .16);
  --xcs-info:        #1D63C7;
  --xcs-info-soft:   rgba(59, 130, 246, .16);

  /* Lapisan token kedua di styles.css (~11769), dipakai 90+ kali: --bh-*.
     Ia HANYA pernah didefinisikan untuk tema terang — 33 aturan
     `color: var(--bh-ink)` dengan nilai #0A0A0A akan menjadi teks nyaris
     hitam di atas permukaan gelap. Karena Nova memindahkan semua orang ke
     mode gelap, token ini sekarang wajib punya nilai per tema. */
  --bh-blue:        #2E7D12;
  --bh-blue-hover:  #245F0E;
  --bh-blue-soft:   rgba(163, 255, 77, .22);
  --bh-slate-50:    #F1F4F1;
  --bh-slate-100:   #E9EDE9;
  --bh-slate-200:   #E0E5E0;
  --bh-slate-700:   #39423C;
  --bh-slate-800:   #222A25;
  --bh-slate-900:   #0B0F0D;
  --bh-ink:         #0B0F0D;
  --bh-muted:       #626C66;

  --xcs-shadow-sm:   0 1px 2px rgba(11, 15, 13, .05);
  --xcs-shadow-md:   0 4px 14px -4px rgba(11, 15, 13, .10);
  --xcs-shadow-lg:   0 14px 34px -10px rgba(11, 15, 13, .14);
  --xcs-shadow-pop:  0 22px 52px -14px rgba(11, 15, 13, .20);

  /* Sudut: kartu lembut, kontrol sedang, pil penuh. */
  --xcs-radius-xs:   8px;
  --xcs-radius-sm:   10px;
  --xcs-radius:      14px;
  --xcs-radius-lg:   18px;
  --xcs-radius-pill: 999px;

  color-scheme: light;
}

/* ═══ TEMA GELAP — inilah referensi, disalin apa adanya ═════════════════════ */
[data-theme="dark"] {
  --xcs-bg-1:        #0B0F0D;
  --xcs-bg-2:        #1A1F24;
  --xcs-bg-3:        #232A30;
  --xcs-bg-tint:     #11161A;

  --xcs-ink-1:       #F9FAFB;
  --xcs-ink-2:       #C9D0D7;
  --xcs-ink-3:       #9CA3AF;
  --xcs-ink-4:       #848D97;
  --xcs-ink-on-brand:#FFFFFF;

  --xcs-line-1:      #2A3138;
  --xcs-line-2:      #3B444D;
  --xcs-line-focus:  #A3FF4D;

  --xcs-navy:        #11161A;
  --xcs-navy-2:      #1A1F24;
  --xcs-navy-3:      #232A30;
  --xcs-yellow:      #A3FF4D;
  --xcs-yellow-soft: rgba(163, 255, 77, .16);
  --xcs-chrome:      var(--nv-grad-d);

  --xcs-blue:        #A3FF4D;
  --xcs-blue-soft:   rgba(163, 255, 77, .16);
  --xcs-blue-fg:     #C4FF8E;
  --xcs-green:       #22C55E;
  --xcs-green-soft:  rgba(34, 197, 94, .16);
  --xcs-orange:      #F59E0B;
  --xcs-orange-soft: rgba(245, 158, 11, .16);
  --xcs-red:         #F4635F;   /* 5,4:1 vs kartu — #EF4444 hanya 4,4:1 */
  --xcs-red-soft:    rgba(239, 68, 68, .16);
  --xcs-violet:      #A78BFA;
  --xcs-violet-soft: rgba(139, 92, 246, .18);
  --xcs-info:        #60A5FA;
  --xcs-info-soft:   rgba(59, 130, 246, .18);

  --bh-blue:        #A3FF4D;
  --bh-blue-hover:  #C4FF8E;
  --bh-blue-soft:   rgba(163, 255, 77, .16);
  --bh-slate-50:    #0B0F0D;
  --bh-slate-100:   #11161A;
  --bh-slate-200:   #2A3138;
  --bh-slate-700:   #C9D0D7;
  --bh-slate-800:   #1A1F24;
  --bh-slate-900:   #F9FAFB;
  --bh-ink:         #F9FAFB;
  --bh-muted:       #9CA3AF;

  /* Referensi hampir tidak memakai bayangan di permukaan gelap — kedalaman
     datang dari tumpukan permukaan (#0B0F0D → #11161A → #1A1F24), bukan blur. */
  --xcs-shadow-sm:   0 1px 2px rgba(0, 0, 0, .40);
  --xcs-shadow-md:   0 6px 18px -6px rgba(0, 0, 0, .55);
  --xcs-shadow-lg:   0 16px 38px -12px rgba(0, 0, 0, .65);
  --xcs-shadow-pop:  0 26px 60px -16px rgba(0, 0, 0, .75);

  color-scheme: dark;
}

/* app.jsx selalu menetapkan data-theme, tetapi blok ini menjaga paint pertama
   kalau skripnya belum sempat jalan. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --xcs-bg-1: #0B0F0D; --xcs-bg-2: #1A1F24; --xcs-bg-3: #232A30; --xcs-bg-tint: #11161A;
    --xcs-ink-1: #F9FAFB; --xcs-ink-2: #C9D0D7; --xcs-ink-3: #9CA3AF; --xcs-ink-4: #848D97;
    --xcs-line-1: #2A3138; --xcs-line-2: #3B444D; --xcs-line-focus: #A3FF4D;
    --xcs-blue: #A3FF4D; --xcs-blue-soft: rgba(163,255,77,.16); --xcs-blue-fg: #C4FF8E;
    --xcs-green: #22C55E; --xcs-orange: #F59E0B; --xcs-red: #F4635F;
    --xcs-violet: #A78BFA; --xcs-info: #60A5FA;
    --bh-blue: #A3FF4D; --bh-blue-hover: #C4FF8E; --bh-blue-soft: rgba(163,255,77,.16);
    --bh-slate-50: #0B0F0D; --bh-slate-100: #11161A; --bh-slate-200: #2A3138;
    --bh-slate-700: #C9D0D7; --bh-slate-800: #1A1F24; --bh-slate-900: #F9FAFB;
    --bh-ink: #F9FAFB; --bh-muted: #9CA3AF;
    color-scheme: dark;
  }
}

/* ═══ TOKEN MODUL OPS (--fsw-*) ════════════════════════════════════════════ */
:root {
  --fsw-accent:      #A3FF4D;
  --fsw-on-accent:   #0B0F0D;   /* tinta di ATAS isian aksen — 16:1 */
  --fsw-accent-ink:  #2E7D12;   /* teks aksen di atas permukaan terang */
  --fsw-accent-line: #3F9C1B;   /* garis aksen di atas permukaan terang */
  --fsw-accent-soft: rgba(163, 255, 77, .26);
  --fsw-accent-side: #A3FF4D;   /* sidebar selalu gelap → limau penuh */
  --fsw-grad:        var(--nv-grad);

  --fsw-red:    #C7302F; --fsw-red-soft: rgba(239, 68, 68, .12);
  --fsw-amber:  #9A6206;
  --fsw-green:  #15803D;
  --fsw-blue:   #1D63C7;
  --fsw-violet: #6D3BD4;

  --fsw-radius:       14px;
  --fsw-radius-sm:    10px;
  --fsw-radius-md:    12px;
  --fsw-radius-input: 10px;
  --fsw-radius-chip:  999px;
  --fsw-bw:           1px;
  --fsw-bw-strong:    1px;
  --fsw-chip-bw:      1px;
  --fsw-th-bw:        1px;
  --fsw-bw-row:       1px;
  --fsw-shadow:       var(--xcs-shadow-sm);

  /* Kisi 8px referensi. */
  --fsw-card-pad:   18px 20px;
  --fsw-card-gap:   12px;
  --fsw-grid-gap:   16px;
  --fsw-kpi-pad:    16px 16px;
  --fsw-stat-pad:   16px 18px;
  --fsw-cell-pad:   12px 10px;
  --fsw-row-pad:    12px 10px;
  --fsw-chip-pad:   3px 10px;

  /* Skala huruf §2 spesifikasi. Teks dasar tetap 14px — menaikkannya
     meluapkan tabel, dan "keluar dari kontainer" adalah keluhan utama
     pemilik pada putaran sebelumnya. Hierarki datang dari judul dan angka. */
  --fsw-fs-h1:       40px;
  --fsw-fs-h1-hp:    26px;
  --fsw-fs-cardh:    18px;
  --fsw-fs-sech:     14px;
  --fsw-fs-kpi:      34px;
  --fsw-fs-kpi-hp:   26px;
  --fsw-fs-tbl:      13.5px;
  --fsw-fs-chip:     12px;
  --fsw-fs-micro:    11.5px;
  --fsw-fs-micro-lg: 12px;

  /* "Minimal but powerful" — label tidak lagi kapital-semua dan tidak
     direnggangkan, kecuali judul grup navigasi (lihat nova-shell.css). */
  --fsw-micro-tt:   none;
  --fsw-micro-ls:   .005em;
  --fsw-micro-fw:   600;
  --fsw-micro-fw-b: 650;
  --fsw-th-ls:      .01em;
  --fsw-sech-ls:    .005em;
  --fsw-statl-tt:   none;
  --fsw-statl-ls:   normal;

  --fsw-th-bg:      transparent;
  --fsw-th-ink:     var(--xcs-ink-3);

  /* Ikonografi referensi: garis luar, tebal seragam, kisi 24px. */
  --fsw-ic-sw:      1.75;
  --fsw-ic-cap:     round;
  --fsw-ic-join:    round;
  --fsw-ic-scale:   1.06;

  /* Nada teks sidebar pada permukaan #11161A. */
  --xcs-side-ink-2: #C3CBD3;
  --xcs-side-ink-3: #8B949E;

  /* Kontrol native (checkbox, radio, range, progress) ikut aksen. */
  accent-color: #A3FF4D;
}

[data-theme="dark"] {
  --fsw-accent-ink:  #A3FF4D;   /* di atas kartu #1A1F24 = 13,5:1 */
  --fsw-accent-line: #A3FF4D;
  --fsw-accent-soft: rgba(163, 255, 77, .15);
  --fsw-red:    #F4635F; --fsw-red-soft: rgba(239, 68, 68, .14);
  --fsw-amber:  #F59E0B;
  --fsw-green:  #22C55E;
  --fsw-blue:   #60A5FA;
  --fsw-violet: #A78BFA;
  --fsw-th-bg:  transparent;
}

/* ═══ DASAR ════════════════════════════════════════════════════════════════ */
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.006em;
  background: var(--xcs-bg-1);
  color: var(--xcs-ink-1);
}
/* Angka selalu selebar sama supaya kolom dan KPI tidak bergoyang. */
body { font-variant-numeric: tabular-nums; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.022em; }

/* Kelas mono tetap ada, tetapi ikut nada teks baru. */
.xcs-mono { color: var(--xcs-ink-3); }

/* ═══ MENGEMBALIKAN KENDALI TOKEN ══════════════════════════════════════════
   styles.css menulis palet gelap LAMA secara harfiah (#141414 kartu,
   rgba(255,255,255,.08) garis) dengan !important pada sembilan tempat. Nilai
   itu mendahului token, jadi tanpa blok ini permukaan gelap akan terkunci di
   abu netral lama sementara sisanya sudah pindah ke tumpukan referensi
   (#0B0F0D → #11161A → #1A1F24). Spesifisitasnya disamakan persis dan berkas
   ini dimuat belakangan, jadi cukup !important untuk menang.
   Ini bukan gaya baru — hanya menyerahkan warnanya kembali ke token. */
[data-theme="dark"] .xcs-stat,
[data-theme="dark"] .xcs-card,
[data-theme="dark"] .xcs-forum-post,
[data-theme="dark"] .xcs-forum-composer,
[data-theme="dark"] .xcs-forum-top-voters,
[data-theme="dark"] .xcs-shop-card,
[data-theme="dark"] .xcs-section,
[data-theme="dark"] .xcs-activity-item,
[data-theme="dark"] .xcs-req-card,
[data-theme="dark"] .xcs-table-row {
  background: var(--xcs-bg-2) !important;
  border-color: var(--xcs-line-1) !important;
}
[data-theme="dark"] .xcs-modal,
[data-theme="dark"] .xcs-modal-image-guide,
[data-theme="dark"] .xcs-modal-vote,
[data-theme="dark"] .xcs-modal-vote-history,
[data-theme="dark"] .xcs-mention-dropdown,
[data-theme="dark"] .xcs-notif-panel,
[data-theme="dark"] .xcs-forum-top-voter {
  background: var(--xcs-bg-2) !important;
}
[data-theme="dark"] .xcs-mention-textarea:focus,
[data-theme="dark"] .xcs-meetus-search-input {
  background: var(--xcs-bg-tint) !important;
}
[data-theme="dark"] .xcs-forum-vote-chip { background: var(--xcs-bg-3) !important; }

/* ═══ TANDA TANGAN REFERENSI ═══════════════════════════════════════════════
   Lembar referensi punya tiga ciri kecil yang membuatnya langsung dikenali,
   dan ketiganya murah: cahaya hijau samar di tepi kanvas, sorotan teks hijau,
   dan batang gulir tipis yang menyatu dengan permukaan. */

/* Kanvas gelap tidak rata — ada kabut hijau yang meluruh dari sudut atas.
   fixed + -1 supaya ia tidak ikut menggulir dan tidak pernah menutupi apa pun. */
[data-theme="dark"] .xcs-main { position: relative; }
[data-theme="dark"] .xcs-main::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 420px at 88% -8%,  rgba(163, 255, 77, .09), transparent 62%),
    radial-gradient(760px 380px at 4%  -12%, rgba(22, 163, 74, .10), transparent 60%);
}

::selection { background: rgba(163, 255, 77, .30); color: var(--xcs-ink-1); }

/* Batang gulir: tipis, tanpa panah, warnanya ikut garis. Firefox memakai
   dua properti berbeda, jadi keduanya ditulis. */
* { scrollbar-width: thin; scrollbar-color: var(--xcs-line-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--xcs-line-2);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--xcs-ink-4); background-clip: padding-box; }

/* Cincin fokus seragam untuk SEMUA kontrol — referensi memakai satu bahasa
   fokus, dan aksesibilitas keyboard di aplikasi ini sebelumnya tidak konsisten. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--fsw-accent-line);
  outline-offset: 2px;
  border-radius: var(--xcs-radius-xs);
}

/* ═══ SATU TOKEN YANG WAJIB !important ═════════════════════════════════════
   styles.css:12005 menulis `[data-theme="light"] { --xcs-bg-1: #F4F4F4
   !important }` — spesifisitas sama dengan blok tema di atas, jadi tanpa
   !important nilai lama menang dan latar halaman tidak pernah berubah.

   !important-nya HARUS menempel pada selector per-tema, BUKAN pada :root.
   Percobaan pertama menaruhnya di blok `:root, [data-theme="light"]`; `:root`
   cocok di KEDUA tema, sehingga mode gelap ikut mengambil #F1F4F1 dan judul
   halaman #F9FAFB jatuh ke 1,06:1 di atasnya — praktis tak terbaca. */
[data-theme="light"] { --xcs-bg-1: #F1F4F1 !important; }
[data-theme="dark"]  { --xcs-bg-1: #0B0F0D !important; }