/* =========================================================
   TOKEN DESAIN
   Palet   : "Buku Kerja" — kertas hangat & kuningan (brass)
   Tipe    : Fraunces (display) + Manrope (teks/UI)
   ========================================================= */

:root {
    /* --- Warna dasar: MODE TERANG --- */
    --color-bg: #faf8f3;
    --color-surface: #ffffff;
    --color-surface-alt: #f1ede3;
    --color-ink: #1b1f24;
    --color-ink-soft: #4a4640;
    --color-muted: #857c6d;
    --color-border: #e4ded0;

    --color-accent: #a9793e;
    --color-accent-strong: #8a5f2c;
    --color-accent-soft: #eadfc8;
    --color-secondary: #2b3a55;

    --color-focus: #2b3a55;

    /* --- Tipografi --- */
    --font-display: "Fraunces", "Georgia", serif;
    --font-body: "Manrope", "Segoe UI", sans-serif;
    --font-mono: "Space Mono", "Courier New", monospace;

    --fs-hero: clamp(2.6rem, 6vw, 5rem);
    --fs-h2: clamp(1.8rem, 3.2vw, 2.6rem);
    --fs-h3: clamp(1.2rem, 2vw, 1.5rem);
    --fs-body: 1rem;
    --fs-small: 0.85rem;
    --fs-eyebrow: 0.78rem;

    /* --- Ruang & layout --- */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: 4rem;
    --space-6: 6.5rem;

    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 18px;

    --max-width: 1120px;

    --shadow-soft: 0 12px 30px -14px rgba(27, 31, 36, 0.18);
    --shadow-lift: 0 20px 45px -18px rgba(27, 31, 36, 0.28);

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 160ms;
    --dur-med: 420ms;

    --level: 0.8;
}

/* --- MODE GELAP --- */
[data-theme="dark"] {
    --color-bg: #12151b;
    --color-surface: #191d25;
    --color-surface-alt: #1f2430;
    --color-ink: #f3efe4;
    --color-ink-soft: #cfc9ba;
    --color-muted: #8b8f9b;
    --color-border: #2b303c;

    --color-accent: #cda05b;
    --color-accent-strong: #e3b876;
    --color-accent-soft: #2e2717;
    --color-secondary: #8fa3c9;

    --color-focus: #cda05b;

    --shadow-soft: 0 12px 30px -14px rgba(0, 0, 0, 0.5);
    --shadow-lift: 0 24px 55px -18px rgba(0, 0, 0, 0.6);
}

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