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

/*==============================
  ROOT VARIABLES
==============================*/
:root {

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

    --primary: #1953c4;
    --primary-dark: #123d94;
    --primary-light: #4d7fe0;

    --secondary: #0f172a;
    --secondary-light: #334155;

    --accent: #38bdf8;

    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;

    /*==========================
      NEUTRALS
    ==========================*/

    --white: #ffffff;
    --black: #000000;

    --body: #555555;
    --heading: #1a1a1a;

    --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;

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

    --heading-font: "Montserrat", sans-serif;
    --body-font: "Inter", sans-serif;

    --fs-12: 0.75rem;
    --fs-14: 0.875rem;
    --fs-16: 1rem;
    --fs-18: 1.125rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    --fs-28: 1.75rem;
    --fs-32: 2rem;
    --fs-40: 2.5rem;
    --fs-48: 3rem;
    --fs-56: 3.5rem;
    --fs-64: 4rem;

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

    --line-height: 1.7;
    --heading-line-height: 1.2;

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

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

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

    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-56: 56px;
    --space-64: 64px;
    --space-72: 72px;
    --space-80: 80px;
    --space-96: 96px;
    --space-120: 120px;

    --section-padding: 100px;

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

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

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

    --shadow-sm:
        0 2px 8px rgba(0,0,0,.05);

    --shadow-md:
        0 10px 25px rgba(0,0,0,.08);

    --shadow-lg:
        0 20px 45px rgba(0,0,0,.12);

    --shadow-xl:
        0 30px 60px rgba(0,0,0,.15);

    --shadow-hover:
        0 18px 40px rgba(25,83,196,.18);

    /*==========================
      BORDERS
    ==========================*/

    --border-color: #e5e7eb;
    --border-light: #f1f5f9;

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

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

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

    --z-header: 999;
    --z-menu: 1000;
    --z-modal: 2000;
    --z-loader: 3000;

}

/*==============================
  DARK THEME SUPPORT
==============================*/

[data-theme="dark"]{

    --white:#111827;
    --gray-50:#1f2937;
    --gray-100:#273449;
    --heading:#ffffff;
    --body:#d1d5db;
}

/*==============================
  GLOBAL TOKENS
==============================*/

::selection{

    background:var(--primary);
    color:var(--white);

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--body-font);
    color:var(--body);
    background:var(--white);

}