/* ==========================================================================
   IndoLinessa Store — "Premium Dark + Emerald"
   Lapisan terakhir, dimuat setelah store.css dan glass.css.

   Halaman beranda tetap memakai tema kertas (sky.css): rasio kontrasnya sudah
   benar dan palet emerald/brass-nya sudah sejalan. Lapisan ini menyelaraskan
   halaman gelap (checkout, order, admin) dengan palet yang sama.

   Palet profesional (hex):
     Latar    #070B0F · #0B0F14 · #0E141A · #111820 · #151D26 · #1A242E
     Garis    #1E2A35 · #2B3947
     Teks     #E9EFF5 · #9BA9B7 · #6E7C8A
     Emerald  #6EE7B7 · #34D399 · #10B981 · #059669 · #04130D
     Brass    #E8C078 · #D4A853 · #B8893B
   ========================================================================== */

:root {
    color-scheme: dark;

    --ink-950: #070B0F;
    --ink-900: #0B0F14;
    --ink-850: #0E141A;
    --ink-800: #111820;
    --ink-750: #151D26;
    --ink-700: #1A242E;

    --line-1: #1E2A35;
    --line-2: #2B3947;

    --bg: var(--ink-900);
    --bg-2: var(--ink-850);
    --strip: var(--ink-950);
    --panel: var(--ink-800);
    --panel-2: var(--ink-750);
    --panel-3: var(--ink-700);
    --input: var(--ink-850);

    --line: var(--line-1);
    --line-gold: rgba(212, 168, 83, 0.26);
    --line-gold-soft: rgba(212, 168, 83, 0.13);

    --text: #E9EFF5;
    --muted: #9BA9B7;
    --faint: #6E7C8A;

    --gold: #D4A853;
    --gold-300: #E8C078;
    --gold-hi: #E8C078;
    --gold-deep: #B8893B;
    --gold-soft: #EBCB94;
    --gold-ink: #14100A;

    --emerald-300: #6EE7B7;
    --emerald-400: #34D399;
    --emerald-500: #10B981;
    --emerald-600: #059669;
    --emerald-ink: #04130D;
    --emerald-soft: rgba(52, 211, 153, 0.10);
    --emerald-line: rgba(52, 211, 153, 0.30);

    --green: var(--emerald-400);
    --red: #F87171;
    --magenta: #C084FC;
    --violet: #A78BFA;

    --obsidian: var(--ink-900);
    --obsidian-2: var(--ink-850);
    --glass-bg: rgba(13, 19, 26, 0.56);
    --glass-bg-hi: rgba(17, 24, 32, 0.72);
    --glass-line: rgba(255, 255, 255, 0.075);
    --glass-line-hi: var(--emerald-line);
}

html { scrollbar-color: var(--line-2) var(--ink-900); scrollbar-width: thin; }
body { background-color: var(--ink-900); color: var(--text); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb {
    background: var(--line-2);
    border: 2px solid var(--ink-900);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: #3A4B5C; }

::selection { background: var(--emerald-400); color: var(--emerald-ink); }

:focus-visible {
    outline: 2px solid var(--emerald-400);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ---------- Header ---------- */

.site-head {
    background: rgba(11, 15, 20, 0.55);
    border-bottom: 1px solid transparent;
}

body.is-scrolled .site-head {
    background: rgba(11, 15, 20, 0.86);
    border-bottom-color: var(--line-1);
}

.brand-logo { filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.6)); }
.brand-sub { color: var(--faint); }

.head-link { color: var(--muted); }
.head-link:hover { color: var(--text); }
.head-link::after { background: var(--emerald-400); }

.cart-pill {
    border-color: var(--line-2);
    background: rgba(255, 255, 255, 0.035);
}

/* ---------- Tombol ---------- */

.btn-primary {
    background: linear-gradient(180deg, var(--emerald-300) 0%, var(--emerald-400) 55%, var(--emerald-600) 100%);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: var(--emerald-ink);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 18px 38px -30px rgba(52, 211, 153, 0.85);
    text-shadow: none;
}

.btn-primary:hover {
    background: linear-gradient(180deg, #8DF2CD 0%, var(--emerald-300) 60%, var(--emerald-500) 100%);
    color: var(--emerald-ink);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 20px 44px -30px rgba(52, 211, 153, 0.9);
    filter: none;
}

.btn-ghost,
.btn-outline {
    border-color: var(--line-2);
    background: rgba(255, 255, 255, 0.03);
}

.btn-ghost:hover,
.btn-outline:hover {
    border-color: var(--emerald-line);
    color: var(--emerald-300);
    background: rgba(52, 211, 153, 0.06);
}

.link-btn { color: var(--emerald-300); }
.link-btn:hover { color: var(--emerald-400); }

.copy-btn { color: var(--gold-soft); }
.copy-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- Permukaan ---------- */

.panel {
    background: linear-gradient(180deg, var(--ink-750) 0%, var(--ink-800) 90px);
    border-color: var(--line-1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), var(--shadow-sm);
}

.hero {
    background:
        radial-gradient(90% 120% at 50% 0%, rgba(16, 185, 129, 0.08), transparent 62%),
        var(--ink-900);
}

.price-amount,
.price { color: var(--gold-300); }

.note-icon {
    border-color: var(--emerald-line);
    background: var(--emerald-soft);
    color: var(--emerald-300);
}

/* ---------- Status ---------- */

.status-ok,
.badge-ok {
    color: var(--emerald-400);
}

/* ---------- Gerak ---------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}