/*=========================================================
    Andcytron Systems Pvt Ltd
    Global Design Variables
    File: variables.css
=========================================================*/

/*---------------------------------------------------------
  GOOGLE FONT
---------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*---------------------------------------------------------
  ROOT VARIABLES
---------------------------------------------------------*/

:root {

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

    --primary: #0057D9;
    --primary-dark: #003E99;
    --primary-light: #EAF3FF;

    --secondary: #FF7A00;
    --secondary-dark: #D85F00;
    --secondary-light: #FFF3E8;

    --accent: #00C2FF;

    /* ===========================
       NEUTRAL COLORS
    =========================== */

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

    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* ===========================
       SUCCESS
    =========================== */

    --success: #16A34A;
    --success-light: #DCFCE7;

    /* ===========================
       WARNING
    =========================== */

    --warning: #F59E0B;
    --warning-light: #FEF3C7;

    /* ===========================
       ERROR
    =========================== */

    --danger: #DC2626;
    --danger-light: #FEE2E2;

    /* ===========================
       INFO
    =========================== */

    --info: #2563EB;
    --info-light: #DBEAFE;

    /* ===========================
       BACKGROUNDS
    =========================== */

    --body-bg: #FFFFFF;

    --section-bg: #F7F9FC;

    --footer-bg: #061A33;

    --card-bg: rgba(255,255,255,.82);

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

    --glass-bg: rgba(255,255,255,.18);

    --glass-border: rgba(255,255,255,.35);

    --glass-blur: blur(20px);

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

    --text-dark: #222222;

    --text-light: #666666;

    --text-white: #FFFFFF;

    /* ===========================
       FONT
    =========================== */

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

    /* ===========================
       FONT SIZE
    =========================== */

    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;

    --fs-h6: 1rem;
    --fs-h5: 1.25rem;
    --fs-h4: 1.5rem;
    --fs-h3: 2rem;
    --fs-h2: 2.75rem;
    --fs-h1: 4rem;

    /* ===========================
       FONT WEIGHT
    =========================== */

    --fw-light:300;
    --fw-normal:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;
    --fw-extra:800;

    /* ===========================
       LINE HEIGHT
    =========================== */

    --lh-base:1.7;
    --lh-heading:1.2;

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

    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-7:32px;
    --space-8:40px;
    --space-9:48px;
    --space-10:64px;
    --space-11:80px;
    --space-12:100px;

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

    --radius-sm:6px;
    --radius:10px;
    --radius-md:16px;
    --radius-lg:24px;
    --radius-xl:40px;
    --radius-round:50%;

    /* ===========================
       SHADOWS
    =========================== */

    --shadow-xs:
        0 2px 4px rgba(0,0,0,.05);

    --shadow-sm:
        0 5px 12px rgba(0,0,0,.08);

    --shadow-md:
        0 12px 30px rgba(0,0,0,.10);

    --shadow-lg:
        0 20px 50px rgba(0,0,0,.15);

    --shadow-xl:
        0 30px 70px rgba(0,0,0,.20);

    /* ===========================
       BUTTONS
    =========================== */

    --btn-height:50px;

    --btn-radius:8px;

    /* ===========================
       NAVBAR
    =========================== */

    --navbar-height:82px;

    --navbar-bg:rgba(255,255,255,.92);

    --navbar-shadow:
        0 8px 24px rgba(0,0,0,.08);

    /* ===========================
       TRANSITIONS
    =========================== */

    --transition-fast:.25s ease;

    --transition:.35s ease;

    --transition-slow:.6s ease;

    /* ===========================
       GRADIENTS
    =========================== */

    --gradient-primary:
        linear-gradient(
            135deg,
            #0057D9,
            #00AEEF
        );

    --gradient-secondary:
        linear-gradient(
            135deg,
            #FF7A00,
            #FFA726
        );

    --gradient-dark:
        linear-gradient(
            135deg,
            #061A33,
            #003E99
        );

    --gradient-ai:
        linear-gradient(
            135deg,
            #0057D9,
            #6A11CB,
            #00C2FF
        );

    --gradient-hero:
        linear-gradient(
            120deg,
            rgba(0,33,71,.82),
            rgba(0,87,217,.45)
        );

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

    --z-header:999;
    --z-dropdown:1000;
    --z-modal:2000;
    --z-loader:9999;

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

    --container-width:1320px;

    /* ===========================
       BREAKPOINTS
    =========================== */

    --mobile:576px;
    --tablet:768px;
    --laptop:992px;
    --desktop:1200px;
    --wide:1400px;

}

/*=========================================================
    END OF VARIABLES
=========================================================*/