/* ===========================================================================
   ANJUNGAN — Sistem Desain "Senja"  (token dasar)
   Indigo-malam hangat + aksen jingga/emas. Gradien dipakai TERBATAS.
   Kontras sudah diverifikasi (algoritma WCAG). Perbaikan kritik diterapkan.
   =========================================================================== */
:root {
  /* — Latar berlapis (langit -> dek kapal) — */
  --bg:            #150F26;
  --surface:       #1B1430;
  --surface-2:     #241A3D;
  --surface-3:     #2E2150;
  --surface-inset: #120C20;

  /* — Garis / border — */
  --line:        #382B57;
  --line-strong: #4A3A6E;
  --line-faint:  #2A2046;

  /* — Teks — */
  --text:       #EADCF7; /* 13.5:1 */
  --text-dim:   #B9A8D6; /* 8.1:1  — pakai untuk semua teks kecil/metadata */
  --text-faint: #8C7BA8; /* 4.64:1 — HANYA ikon/hairline/teks >=18px, jangan body kecil */
  --text-on-accent: #2A1206;
  --text-hero:  #FFF4E6; /* selalu di atas scrim gelap (lihat .hero) */

  /* — Aksen — */
  --accent:       #FF7A4D;
  --accent-hover: #FF9067;
  --accent-press: #E5663B;
  --gold:         #FFC76B;
  --violet:       #C9A6F0;

  /* — Status — */
  --ok:     #5BE0A6;
  --warn:   #FFC76B;
  --danger: #FF6B6B;
  --info:   #C9A6F0;
  --ok-glow:     rgba(91,224,166,.35);
  --danger-glow: rgba(255,107,107,.35);
  --accent-glow: rgba(255,122,77,.30);

  /* — Gradien senja (TERBATAS: hero, pita nav aktif, 1 garis aksen) — */
  --grad-senja: linear-gradient(100deg,#3A2350 0%,#7A3A8C 32%,#FF7A4D 72%,#FFC76B 100%);
  --grad-pita:  linear-gradient(90deg,#FF7A4D 0%,#FFC76B 100%);
  --grad-glow:  radial-gradient(120% 140% at 85% -10%, rgba(255,199,107,.30) 0%, rgba(255,122,77,.12) 35%, transparent 70%);
  /* scrim di belakang teks hero -> teks selalu AA di SEMUA fase */
  --hero-scrim: linear-gradient(180deg, rgba(10,6,22,.10) 0%, rgba(10,6,22,.55) 100%);

  /* — Bayangan (indigo, bukan hitam) — */
  --shadow-1: 0 1px 2px rgba(10,6,22,.5);
  --shadow-2: 0 6px 20px -6px rgba(10,6,22,.65);
  --shadow-3: 0 18px 48px -12px rgba(10,6,22,.75);

  /* — Radius & spasi — */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-8:48px;

  /* — Layout — */
  --sidebar-w:264px; --sidebar-rail:76px; --topbar-h:64px;
  --content-max:1240px; --content-pad:32px;

  /* — Font — */
  --font-display:'Clash Display','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}

/* Fokus keyboard: ring dua lapis (offset gelap dulu) -> terlihat di atas tombol jingga (>=3:1) */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--bg);
  border-radius: inherit;
}

/* Kontras tinggi: tebalkan garis, hero jadi solid */
@media (prefers-contrast: more) {
  :root { --line: var(--line-strong); --text-faint: var(--text-dim); }
}

/* Kurangi gerak: matikan SEMUA animasi & transisi besar */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}