/* =========================================================
   GLOBAL.CSS
   Premium UI Framework 2026
   Author : Ardiaz Fahrezi
========================================================= */

/* =========================================================
   DESIGN TOKENS
========================================================= */

:root{

    /* =====================================================
       BRAND COLORS
    ===================================================== */

    --primary:#15803d;
    --primary-dark:#166534;
    --primary-light:#22c55e;
    --primary-soft:#dcfce7;

    --accent:#16a34a;
    --accent-light:#4ade80;

    --gold:#d4af37;
    --gold-light:#f7e29a;

    --danger:#dc2626;
    --warning:#f59e0b;
    --info:#2563eb;
    --success:#16a34a;

    /* =====================================================
       BACKGROUND
    ===================================================== */

    --bg-body:#ffffff;

    --bg-section:#f8fbf9;

    --bg-section-alt:#eef8f1;

    --bg-card:#ffffff;

    --bg-card-hover:#fcfefd;

    --bg-dark:#0f172a;

    /* =====================================================
       GLASS
    ===================================================== */

    --glass:
        rgba(255,255,255,.72);

    --glass-strong:
        rgba(255,255,255,.90);

    --glass-dark:
        rgba(15,23,42,.72);

    /* =====================================================
       TEXT
    ===================================================== */

    --text-main:#0f172a;

    --text-heading:#0b1324;

    --text-soft:#475569;

    --text-muted:#64748b;

    --text-light:#94a3b8;

    --text-white:#ffffff;

    /* =====================================================
       BORDER
    ===================================================== */

    --border:#e2e8f0;

    --border-soft:#edf2f7;

    --border-strong:#dbe5ec;

    --border-accent:
        rgba(21,128,61,.15);

    /* =====================================================
       BORDER RADIUS
    ===================================================== */

    --radius-xs:10px;

    --radius-sm:16px;

    --radius-md:22px;

    --radius-lg:30px;

    --radius-xl:42px;

    --radius-full:999px;

    /* =====================================================
       SHADOW
    ===================================================== */

    --shadow-xs:
        0 4px 10px rgba(15,23,42,.04);

    --shadow-sm:
        0 8px 20px rgba(15,23,42,.05);

    --shadow-md:
        0 18px 40px rgba(15,23,42,.08);

    --shadow-lg:
        0 30px 60px rgba(15,23,42,.12);

    --shadow-green:
        0 16px 34px rgba(21,128,61,.12);

    --shadow-gold:
        0 16px 34px rgba(212,175,55,.18);

    /* =====================================================
       TYPOGRAPHY
    ===================================================== */

    --font-main:
        "Plus Jakarta Sans",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    /* =====================================================
       LAYOUT
    ===================================================== */

    --container:1320px;

    --container-wide:1440px;

    --container-sm:960px;

    --header-height:82px;

    /* =====================================================
       IMAGE
    ===================================================== */

    --image-radius:22px;

    /* =====================================================
       Z-INDEX
    ===================================================== */

    --z-dropdown:100;

    --z-sticky:500;

    --z-fixed:800;

    --z-modal:1000;

    --z-toast:1200;

    /* =====================================================
       TRANSITION
    ===================================================== */

    --transition-fast:.18s ease;

    --transition:
        .30s cubic-bezier(.4,0,.2,1);

    --transition-slow:
        .45s cubic-bezier(.4,0,.2,1);

}

/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

/* =========================================================
   HTML
========================================================= */

html{

    font-size:16px;

    scroll-behavior:smooth;

    overflow-x:hidden;

    -webkit-text-size-adjust:100%;

    text-size-adjust:100%;

}

/* =========================================================
   BODY & FORM ELEMENTS
========================================================= */

body,
button,
input,
textarea,
select{

    font-family:var(--font-main);

}

/* =========================================================
   BODY
========================================================= */

body{

    position:relative;

    min-height:100vh;

    overflow-x:hidden;

    color:var(--text-main);

    background:

        radial-gradient(
            circle at 12% 8%,
            rgba(22,163,74,.10) 0%,
            rgba(22,163,74,.05) 18%,
            transparent 45%
        ),

        radial-gradient(
            circle at 88% 12%,
            rgba(34,197,94,.08) 0%,
            rgba(34,197,94,.04) 18%,
            transparent 42%
        ),

        radial-gradient(
            circle at 15% 88%,
            rgba(163,230,53,.08) 0%,
            rgba(163,230,53,.03) 18%,
            transparent 45%
        ),

        radial-gradient(
            circle at 90% 85%,
            rgba(74,222,128,.07) 0%,
            rgba(74,222,128,.03) 18%,
            transparent 42%
        ),

        linear-gradient(
            180deg,
            #ffffff 0%,
            #fcfefc 25%,
            #f7fbf7 55%,
            #f2f8f2 85%,
            #eef7ef 100%
        );

    background-attachment:fixed;

    font-weight:400;

    line-height:1.75;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;

}

body::before{

    content:"";

    position:fixed;

    top:-220px;
    left:-220px;

    width:650px;
    height:650px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(34,197,94,.16) 0%,

            rgba(34,197,94,.08) 28%,

            transparent 72%

        );

    filter:blur(120px);

    pointer-events:none;

    z-index:-10;

}

body::after{

    content:"";

    position:fixed;

    right:-220px;
    bottom:-240px;

    width:560px;
    height:560px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(212,175,55,.10),

            transparent 72%

        );

    filter:blur(100px);

    pointer-events:none;

    z-index:-10;

}