:root {

    /* =========================================================
       BISDIG UJB — JANABADRA DIGITAL COLOR SYSTEM
       FASE 1.1 — FINAL BRAND HIERARCHY

       PRIMARY IDENTITY
       Janabadra Red = wajah utama brand

       SECONDARY IDENTITY
       Burgundy = identitas premium / akademik

       DEPTH
       Wine = dark premium / hero / footer

       PREMIUM ACCENT
       Champagne Gold = aksen kecil

       NEUTRAL
       Charcoal + Ivory = ruang visual
       ========================================================= */


    /* =========================================================
       01. JANABADRA RED
       PRIMARY BRAND IDENTITY
       
       Ini warna utama identitas Janabadra.
       Gunakan untuk:
       - CTA
       - tombol utama
       - active state
       - link penting
       - highlight
       - angka/statistik utama
       ========================================================= */

    --color-red: #C62828;
    --color-red-dark: #A61F1F;
    --color-red-light: #E53935;

    --color-red-soft: #FCECEC;
    --color-red-pale: #FFF5F5;

    --color-red-rgb: 198, 40, 40;


    /* =========================================================
       02. BURGUNDY
       SECONDARY BRAND

       Memberikan karakter:
       - akademik
       - dewasa
       - elegan
       - premium

       Tidak menggantikan Janabadra Red.
       ========================================================= */

    --color-burgundy: #8F1D2C;
    --color-burgundy-dark: #641522;
    --color-burgundy-deep: #4D121C;
    --color-burgundy-soft: #A52A38;
    --color-burgundy-light: #B83A48;


    /* =========================================================
       03. WINE
       PREMIUM DEPTH

       Untuk:
       - hero
       - footer
       - dark section
       - overlay
       - gradient
       ========================================================= */

    --color-wine: #641522;
    --color-wine-dark: #451019;
    --color-wine-deep: #300B12;
    --color-wine-soft: #7A1B29;

    --color-wine-rgb: 100, 21, 34;


    /* =========================================================
       04. CHAMPAGNE GOLD
       PREMIUM ACCENT

       Gunakan sedikit.
       Jangan menjadi warna dominan.
       ========================================================= */

    --color-gold: #C9A45C;
    --color-gold-dark: #A9823D;
    --color-gold-light: #DFC27A;
    --color-gold-soft: #F5EBD5;

    --color-gold-rgb: 201, 164, 92;


    /* =========================================================
       05. PREMIUM CHARCOAL
       DARK NEUTRAL

       Pengganti dominasi navy lama.
       ========================================================= */

    --color-charcoal: #242426;
    --color-charcoal-dark: #171719;
    --color-charcoal-deep: #101012;
    --color-charcoal-soft: #303034;
    --color-charcoal-light: #3B3B40;

    --color-charcoal-rgb: 23, 23, 25;


    /* =========================================================
       06. IVORY / CREAM
       LIGHT SYSTEM
       ========================================================= */

    --color-white: #FFFFFF;

    --color-ivory: #FAF8F3;
    --color-cream: #F7F3EA;
    --color-cream-dark: #EEE8DC;

    --color-surface: #FAF9F6;
    --color-surface-dark: #F0ECE5;


    /* =========================================================
       07. TEXT
       ========================================================= */

    --color-text: #242426;
    --color-text-soft: #3F3F44;
    --color-muted: #6B6B72;
    --color-light: #96969D;

    --color-text-on-dark: #FFFFFF;
    --color-text-on-dark-soft: rgba(255,255,255,.72);


    /* =========================================================
       08. BORDER
       ========================================================= */

    --color-border: #E6E0D7;
    --color-border-dark: #D5CEC2;

    --color-border-red:
        rgba(198,40,40,.18);

    --color-border-gold:
        rgba(201,164,92,.24);


    /* =========================================================
       09. BASIC COLORS
       ========================================================= */

    --white: #FFFFFF;
    --black: #000000;
    --transparent: transparent;


    /* =========================================================
       10. LEGACY NAVY
       
       JANGAN DIHAPUS.

       Hanya compatibility untuk komponen lama.
       Tidak digunakan untuk desain baru.
       ========================================================= */

    --color-navy: #3A2630;
    --color-navy-dark: #26171D;
    --color-navy-deep: #180F13;
    --color-navy-soft: #51323B;
    --color-navy-light: #70454E;

    --color-navy-rgb: 58,38,48;


    /* =========================================================
       11. BRAND ALIASES
       ========================================================= */

    /* Primary Janabadra */
    --brand-primary:
        var(--color-red);

    --brand-primary-hover:
        var(--color-red-dark);


    /* Dark */
    --brand-dark:
        var(--color-charcoal-dark);


    /* Light */
    --brand-light:
        var(--color-ivory);


    /* Premium */
    --brand-accent:
        var(--color-gold);


    /* =========================================================
       12. PREMIUM BRAND ALIASES
       ========================================================= */

    --brand-red:
        var(--color-red);

    --brand-burgundy:
        var(--color-burgundy);

    --brand-wine:
        var(--color-wine);

    --brand-gold:
        var(--color-gold);

    --brand-ivory:
        var(--color-ivory);

    --brand-charcoal:
        var(--color-charcoal-dark);


    /* =========================================================
       13. LEGACY BLUE COMPATIBILITY
       
       Nama variable lama tetap tersedia agar file lama
       tidak langsung rusak.

       NILAI BARU sudah diarahkan ke palette Janabadra.
       Jangan digunakan untuk CSS baru.
       ========================================================= */

    --blue-50:
        var(--color-red-pale);

    --blue-100:
        var(--color-red-soft);

    --blue-500:
        var(--color-burgundy);

    --blue-600:
        var(--color-burgundy-dark);

    --sky-50:
        var(--color-ivory);

    --sky-400:
        var(--color-gold);


    /* =========================================================
       14. SLATE
       NEUTRALIZED SLATE

       Tidak lagi bernuansa biru.
       ========================================================= */

    --slate-50: #FAF9F6;
    --slate-100: #F4F1EB;
    --slate-200: #E6E0D7;
    --slate-300: #D5CEC2;
    --slate-400: #A3A0A0;
    --slate-500: #777377;
    --slate-600: #5C585C;
    --slate-700: #454146;
    --slate-800: #302D31;
    --slate-900: #211F22;


    /* =========================================================
       15. STATUS COLORS
       
       STATUS TETAP TERPISAH DARI BRAND.

       Success = hijau
       Warning = amber
       Danger = merah
       Info = burgundy
       ========================================================= */

    --amber-50: #FFFBEB;
    --amber-100: #FEF3C7;
    --amber-500: #D89A20;
    --amber-600: #B7791F;

    --emerald-50: #ECFDF5;
    --emerald-500: #159A68;

    --color-success: #15803D;
    --color-warning: #B45309;
    --color-danger: #B91C1C;

    --color-info:
        var(--color-burgundy);


    /* =========================================================
       16. PREMIUM GRADIENT
       ========================================================= */

    /* Primary Janabadra */
    --gradient-brand:
        linear-gradient(
            135deg,
            var(--color-burgundy-dark) 0%,
            var(--color-red-dark) 52%,
            var(--color-red) 100%
        );


    /* Premium Dark */
    --gradient-premium:
        linear-gradient(
            135deg,
            var(--color-charcoal-deep) 0%,
            var(--color-wine-dark) 45%,
            var(--color-burgundy) 100%
        );


    /* Hero */
    --gradient-hero:
        radial-gradient(
            circle at 78% 18%,
            rgba(var(--color-gold-rgb),.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 12% 78%,
            rgba(var(--color-red-rgb),.16),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            var(--color-wine-dark) 0%,
            var(--color-burgundy-dark) 42%,
            var(--color-burgundy) 70%,
            var(--color-charcoal-dark) 100%
        );


    /* Red CTA */
    --gradient-red:
        linear-gradient(
            135deg,
            var(--color-red-dark) 0%,
            var(--color-red) 55%,
            var(--color-red-light) 100%
        );


    /* Burgundy */
    --gradient-burgundy:
        linear-gradient(
            135deg,
            var(--color-burgundy-dark) 0%,
            var(--color-burgundy) 55%,
            var(--color-red) 100%
        );


    /* Gold */
    --gradient-gold:
        linear-gradient(
            135deg,
            var(--color-gold-dark) 0%,
            var(--color-gold) 55%,
            var(--color-gold-light) 100%
        );


    /* Ivory */
    --gradient-ivory:
        linear-gradient(
            135deg,
            var(--color-white) 0%,
            var(--color-ivory) 100%
        );


    /* =========================================================
       17. PREMIUM GLOW
       ========================================================= */

    --glow-red:
        0 0 35px
        rgba(var(--color-red-rgb),.18);

    --glow-red-strong:
        0 0 50px
        rgba(var(--color-red-rgb),.26);

    --glow-gold:
        0 0 35px
        rgba(var(--color-gold-rgb),.16);


    /* =========================================================
       18. SHADOWS
       ========================================================= */

    --shadow-soft:
        0 10px 40px -10px
        rgba(36,36,38,.08);

    --shadow-sm:
        0 1px 2px
        rgba(36,36,38,.06);

    --shadow-md:
        0 4px 12px
        rgba(36,36,38,.09);

    --shadow-lg:
        0 12px 28px
        rgba(36,36,38,.12);

    --shadow-xl:
        0 20px 45px
        rgba(36,36,38,.15);

    --shadow-2xl:
        0 28px 70px
        rgba(16,16,18,.22);

    --shadow-red:
        0 12px 30px
        rgba(var(--color-red-rgb),.20);

    --shadow-red-strong:
        0 18px 45px
        rgba(var(--color-red-rgb),.26);

    --shadow-gold:
        0 10px 30px
        rgba(var(--color-gold-rgb),.18);