/* ============================================================
   DISARPUS WONOGIRI — Design Tokens
   ------------------------------------------------------------
   Filosofi: scholarly retro modern.
   Setiap warna punya makna simbolik:
     • Coklat-Emas  → heritage, naskah, kearsipan klasik
     • Biru-Navy    → DNA Perpusnas, pustaka, modernitas digital
     • Hijau-ANRI   → DNA ANRI, kearsipan, memori kolektif
     • Cream        → background dasar, kertas, parchment
   ============================================================ */

:root {

    /* ---- Brown / Coffee / Sepia ---- */
    --c-brown-ink:       #2B1810;
    --c-brown-deep:      #3E2817;
    --c-brown:           #5C3A1F;
    --c-brown-soft:      #8B5E3C;

    /* ---- Gold / Antique ---- */
    --c-gold-deep:       #8B6914;
    --c-gold:            #A0782D;
    --c-gold-mid:        #C8A961;
    --c-gold-light:      #E5C97B;
    --c-gold-pale:       #F5EBD5;
    --c-gold-wash:       #FAF1E0;

    /* ---- Blue (Perpusnas DNA) ---- */
    --c-blue-darkest:    #0A1F3D;
    --c-blue-deep:       #0F2D5C;
    --c-blue-navy:       #1B3A6B;
    --c-blue-mid:        #1B4FA3;
    --c-blue-electric:   #2563EB;
    --c-blue-bright:     #3B82F6;
    --c-blue-pale:       #DBEAFE;
    --c-blue-wash:       #E8EEF8;
    --c-blue-faint:      #F0F5FB;

    /* ---- Green (ANRI DNA) ---- */
    --c-green-darkest:   #0A3D2A;
    --c-green-deep:      #0F4226;
    --c-green:           #1B5E3F;
    --c-green-mid:       #2D7A52;
    --c-green-bright:    #34A853;
    --c-green-pale:      #D1E7DA;
    --c-green-wash:      #E8F2EC;
    --c-green-faint:     #F0F7F2;

    /* ---- Parchment / Cream ---- */
    --c-cream-surface:   #FAF6EB;
    --c-cream:           #F5EFE2;
    --c-cream-shade:     #F0EDE0;
    --c-cream-dark:      #E8DDC4;
    --c-cream-border:    #C8B79A;
    --c-cream-line:      #D4C5A0;

    /* ---- Status ---- */
    --c-text-primary:    var(--c-brown-ink);
    --c-text-secondary:  var(--c-brown);
    --c-text-muted:      var(--c-brown-soft);
    --c-text-on-dark:    var(--c-cream-dark);
    --c-text-on-dark-strong: var(--c-cream-surface);

    /* ---- Gradients utama ---- */
    --grad-header:       linear-gradient(90deg,
                            var(--c-brown-ink) 0%,
                            var(--c-green-deep) 25%,
                            var(--c-green) 40%,
                            var(--c-blue-deep) 60%,
                            var(--c-blue-darkest) 100%);

    --grad-footer:       linear-gradient(90deg,
                            var(--c-brown-ink) 0%,
                            var(--c-green-deep) 25%,
                            var(--c-green) 45%,
                            var(--c-blue-mid) 65%,
                            var(--c-blue-darkest) 100%);

    --grad-accent-line:  linear-gradient(90deg,
                            var(--c-gold-mid) 0%,
                            var(--c-green) 35%,
                            var(--c-green-mid) 50%,
                            var(--c-blue-mid) 65%,
                            var(--c-blue-electric) 80%,
                            var(--c-gold-mid) 100%);

    --grad-btn-blue:     linear-gradient(135deg,
                            var(--c-blue-darkest) 0%,
                            var(--c-blue-mid) 60%,
                            var(--c-blue-electric) 100%);

    --grad-btn-green:    linear-gradient(135deg,
                            var(--c-green-deep) 0%,
                            var(--c-green) 60%,
                            var(--c-green-mid) 100%);

    --grad-btn-brown:    linear-gradient(135deg,
                            var(--c-brown-deep) 0%,
                            var(--c-brown) 50%,
                            var(--c-gold) 100%);

    /* ---- Typography ---- */
    --font-display:      'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    --font-serif:        'Lora', Georgia, 'Times New Roman', serif;
    --font-label:        'Cinzel', 'Trajan Pro', 'Times New Roman', serif;

    /* ---- Sizing ---- */
    --container:         1200px;
    --container-narrow:  960px;
    --radius-sm:         2px;
    --radius:            4px;
    --radius-md:         8px;
    --radius-lg:         12px;
    --radius-pill:       999px;

    /* ---- Spacing ---- */
    --space-xs:          0.5rem;
    --space-sm:          0.75rem;
    --space:             1rem;
    --space-md:          1.5rem;
    --space-lg:          2rem;
    --space-xl:          3rem;
    --space-2xl:         4.5rem;

    /* ---- Shadows ---- */
    --shadow-blue:       0 4px 14px rgba(27, 79, 163, 0.18);
    --shadow-green:      0 4px 14px rgba(27, 94, 63, 0.15);
    --shadow-brown:      0 4px 14px rgba(62, 40, 23, 0.12);
    --shadow-card:       0 1px 3px rgba(43, 24, 16, 0.08);

    /* ---- Transitions ---- */
    --tx-fast:           150ms ease;
    --tx:                250ms ease;
    --tx-slow:           400ms ease;
}

/* ============================================================
   Tabler Icons via CDN (outline icons)
   ============================================================ */
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.34.0/dist/tabler-icons.min.css');