/* ============================================
   NUSA TIRTA TEKNOLOGI
   Design System v1.0
============================================ */

:root {

    /* =====================================
        COLOR SYSTEM
    ====================================== */

    --primary: #0B2E6D;
    --primary-light: #1E4F9F;
    --primary-dark: #071F4B;

    --secondary: #FF6B00;
    --secondary-light: #FF8A33;
    --secondary-dark: #E45A00;

    --success: #22C55E;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #06B6D4;

    --white: #FFFFFF;
    --black: #111827;

    --gray-50: #F8FAFC;
    --gray-100: #F1F5F9;
    --gray-200: #E2E8F0;
    --gray-300: #CBD5E1;
    --gray-400: #94A3B8;
    --gray-500: #64748B;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1E293B;
    --gray-900: #0F172A;

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

    --text-color: var(--gray-700);
    --text-light: var(--gray-500);
    --title-color: var(--gray-900);

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

    --background: #F8FAFC;
    --surface: #FFFFFF;

    --gradient-primary: linear-gradient(
        135deg,
        #0B2E6D 0%,
        #1E4F9F 100%
    );

    --gradient-orange: linear-gradient(
        135deg,
        #FF6B00,
        #FF9D00
    );

    --gradient-dark: linear-gradient(
        135deg,
        #081B3C,
        #0B2E6D
    );

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

    --font-primary: "Poppins", sans-serif;
    --font-secondary: "Inter", sans-serif;

    --font-size-xs: .75rem;
    --font-size-sm: .875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.8rem;
    --font-size-5xl: 3.5rem;

    --font-light:300;
    --font-regular:400;
    --font-medium:500;
    --font-semibold:600;
    --font-bold:700;
    --font-extra-bold:800;

    --line-height:1.8;

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

    --radius-xs:6px;
    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:22px;
    --radius-xl:30px;
    --radius-full:999px;

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

    --shadow-xs:
        0 2px 6px rgba(0,0,0,.04);

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

    --shadow-md:
        0 15px 35px rgba(15,23,42,.10);

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

    --shadow-hover:
        0 30px 70px rgba(11,46,109,.18);

    /* =====================================
        SPACING
    ====================================== */

    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-7:30px;
    --space-8:40px;
    --space-9:60px;
    --space-10:80px;
    --space-11:100px;
    --space-12:120px;

    /* =====================================
        CONTAINER
    ====================================== */

    --container-width:1240px;
    --container-padding:20px;

    /* =====================================
        HEADER
    ====================================== */

    --header-height:85px;

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

    --transition-fast:.25s ease;
    --transition:.35s ease;
    --transition-slow:.55s ease;

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

    --z-loader:99999;
    --z-modal:9999;
    --z-navbar:999;
    --z-dropdown:100;
    --z-fixed:50;

    

}


body{
    zoom:70%;
}