/*
  LǐRénXīn API — design tokens
  Danzz For You 💌

  Satu sumber untuk warna, shadow, dan efek yang dipakai semua halaman.
  Sebelumnya tiap halaman punya config Tailwind inline sendiri dengan nilai
  yang beda-beda (shadow hard hitam di donasi, ungu di docs), jadi
  tampilannya nggak nyambung antar halaman.

  Dark mode: <html class="dark">, disetel theme.js sebelum render
  supaya nggak ada kedipan putih.
*/

:root {
    --ink: #0f172a;
    --ink-soft: #475569;
    --ink-faint: #94a3b8;

    --surface: #ffffff;
    --surface-sunk: #f8fafc;
    --page: #f4f5fb;

    --brand: #8b5cf6;
    --brand-strong: #7c3aed;
    --brand-soft: #c4b5fd;
    --brand-wash: rgba(139, 92, 246, 0.08);

    --sky: #38bdf8;
    --ok: #22c55e;
    --warn: #f59e0b;
    --bad: #ef4444;

    --line: var(--brand);
    --line-soft: rgba(139, 92, 246, 0.22);

    /* Shadow keras neo-brutalist, offset seragam di semua halaman */
    --shadow: 4px 4px 0 0 var(--brand);
    --shadow-sm: 2px 2px 0 0 var(--brand);
    --shadow-lg: 6px 6px 0 0 var(--brand-strong);

    --term-bg: #1b1b21;
    --term-head: #2a2a32;
    --term-text: #d4d4d4;

    --radius: 8px;
    --radius-sm: 6px;
}

html.dark {
    --ink: #e6e8ee;
    --ink-soft: #a5adbe;
    --ink-faint: #6b7488;

    --surface: #15161c;
    --surface-sunk: #1c1d25;
    --page: #0e0f14;

    --brand: #a78bfa;
    --brand-strong: #c4b5fd;
    --brand-soft: #6d28d9;
    --brand-wash: rgba(167, 139, 250, 0.12);

    --line-soft: rgba(167, 139, 250, 0.26);

    --shadow: 4px 4px 0 0 var(--brand);
    --shadow-sm: 2px 2px 0 0 var(--brand);
    --shadow-lg: 6px 6px 0 0 var(--brand-strong);

    --term-bg: #0d0e12;
    --term-head: #191a20;
}

/* ---------- base ---------- */

html {
    overflow-x: hidden;
    width: 100%;
    scrollbar-gutter: stable;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: var(--page);
    color: var(--ink);
    transition: background-color .2s ease, color .2s ease;
}

/*
  Grid halus sebagai latar semua halaman — pengganti tumpukan
  background-image + overlay + blur blob yang dulu beda per halaman.
*/
body.grid-bg {
    background-image:
        linear-gradient(var(--line-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: 28px 28px;
}

::selection {
    background: var(--brand);
    color: #fff;
}

/* ---------- scrollbar ---------- */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-strong); }
::-webkit-scrollbar-corner { background: transparent; }

* { scrollbar-width: thin; scrollbar-color: var(--brand) transparent; }

/* ---------- komponen ---------- */

.panel {
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Tekan tombol: shadow masuk, elemen geser — arah gerak sama di semua halaman */
.press {
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.press:hover { box-shadow: var(--shadow-lg); transform: translate(-1px, -1px); }
.press:active { box-shadow: none; transform: translate(4px, 4px); }

.chip {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    background: var(--brand-wash);
    color: var(--brand);
}

.field {
    width: 100%;
    background: var(--surface);
    color: var(--ink);
    border: 2px solid var(--line-soft);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-family: inherit;
    font-size: 12px;
    transition: border-color .15s ease, background-color .15s ease;
}
.field:focus {
    outline: none;
    border-color: var(--brand);
    background: var(--brand-wash);
}
.field::placeholder { color: var(--ink-faint); }

/* ---------- terminal ---------- */

.term {
    background: var(--term-bg);
    color: var(--term-text);
}
.term-head { background: var(--term-head); }
.crt-text { text-shadow: 0 0 2px rgba(255, 255, 255, .18); }

/* ---------- JSON highlight ---------- */

.json-key { color: #f87171; font-weight: 700; }
.json-string { color: #a3e635; }
.json-number { color: #60a5fa; font-weight: 700; }
.json-boolean { color: #c084fc; font-style: italic; font-weight: 700; }
.json-null { color: #94a3b8; font-style: italic; }

/* ---------- animasi ---------- */

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-150%); } }
@keyframes pop { 0% { transform: scale(.96); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes shine { to { background-position-x: -200%; } }
@keyframes rise { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }

.animate-blink { animation: blink 1s step-end infinite; }
.animate-marquee { animation: marquee 18s linear infinite; }
.animate-pop { animation: pop .3s cubic-bezier(.175, .885, .32, 1.275) forwards; }
.animate-rise { animation: rise .4s ease-out forwards; }

.skeleton {
    background: linear-gradient(110deg, var(--surface-sunk) 8%, var(--brand-wash) 22%, var(--surface-sunk) 36%);
    background-size: 200% 100%;
    animation: shine 1.4s linear infinite;
    border-radius: var(--radius-sm);
}

/*
  Hormati setelan "kurangi gerakan" di OS.
  Halaman ini animasinya banyak, jadi ini bukan sekadar formalitas.
*/
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}