:root{
  --hitam:#0a0b0d;
  --kanvas:#0e1013;
  --panel:#15181c;
  --panel2:#1b1f24;
  --garis:#252a31;
  --garis2:#333a44;

  --teks:#e9ecf1;
  --redup:#98a1ae;
  --samar:#8a93a0;  /* 5.7:1 di panel gelap (dulu #69727f = 3.7:1) */

  --aksi:#e8c46a;
  --aksi-teks:#1d1707;
  --aksi-lembut:rgba(232,196,106,.12);

  --biru:#6ba3f5;
  --hijau:#4cc38a;
  --merah:#f07171;
  --kuning:#e0a84a;

  --r-s:8px; --r:12px; --r-l:16px; --r-xl:22px;
  /* Tumpukan font mengikuti aplikasi AI seperti Claude. Styrene/Copernicus
     berlisensi dan tidak bisa dikirim, jadi dipakai rantai cadangan yang sama
     dengan yang mereka pakai saat font utamanya tak tersedia — plus ukuran dan
     tinggi baris yang menirukan rasa bacanya: badan 16px, line-height 1.7. */
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",
    Arial,"Noto Sans",sans-serif;
}

:root{
  --c-bg:var(--hitam);
  --c-surface:var(--kanvas);
  --c-surface-lowest:var(--hitam);
  --c-surface-low:var(--panel);
  --c-surface-2:var(--panel);
  --c-surface-high:var(--panel2);
  --c-surface-highest:var(--garis);
  --c-surface-bright:var(--garis2);

  --glass-bg:var(--panel);
  --glass-border:var(--garis);
  --glass-blur:0px;
  --glass-blur-modal:0px;

  --c-text:var(--teks);
  --c-text-variant:var(--redup);
  --c-outline:var(--samar);
  --c-outline-variant:var(--garis);

  --c-primary:var(--aksi);
  --c-primary-soft:var(--aksi);
  --c-primary-container:var(--aksi);
  --c-on-primary:var(--aksi-teks);
  --c-secondary:var(--biru);
  --c-secondary-soft:var(--biru);
  --c-secondary-container:var(--biru);
  --c-tertiary:var(--kuning);
  --c-tertiary-soft:var(--kuning);
  --c-tertiary-container:var(--kuning);

  --c-error:var(--merah);
  --c-danger:var(--merah);
  --c-danger-soft:var(--merah);
  --c-success:var(--hijau);
  --c-success-soft:var(--hijau);
  --c-warn:var(--kuning);
  --c-warn-soft:var(--kuning);

  --grad-primary:var(--aksi);
  --grad-vibrant:var(--aksi);
  --glow-primary:0 0 0 1px var(--aksi-lembut);
  --glow-secondary:0 0 0 1px var(--aksi-lembut);

  --font-display:var(--sans);
  --font-body:var(--sans);
  --font-mono:var(--mono);
  --t-display-lg:700 30px/1.2 var(--sans);
  --t-headline:700 22px/1.3 var(--sans);
  --t-title:600 15px/1.4 var(--sans);
  --t-body:400 16px/1.7 var(--sans);
  --t-body-sm:400 13.5px/1.6 var(--sans);
  --ls-display:-.01em;
  --label-caps-ls:.1em;

  --r-sm:6px; --r-md:9px; --r-lg:var(--r-l); --r-full:999px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px;
  --gutter:16px; --margin-page:clamp(16px,4vw,32px);
  --container-max:1440px; --panel-side:248px; --timeline-h:280px;

  --dur-fast:120ms; --dur:160ms; --dur-slow:220ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* Ikon aplikasi memakai emoji, menggantikan Material Symbols. Sengaja TANPA
   font-size supaya ikon ikut ukuran teks di sekitarnya; gaya inline yang sudah
   menempel (font-size:40px dan sejenisnya) tetap menang atas kelas ini. */
.ie{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--sans);
  font-style:normal;font-weight:400;line-height:1;display:inline-block;
  vertical-align:-.1em;white-space:nowrap}

@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms;--dur:0ms;--dur-slow:0ms}}