/* ===========================================================
   ROVING RUSH
   VARIABLES.CSS
   Design System
=========================================================== */

:root {

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

    --color-primary: #00C2FF;
    --color-primary-dark: #0099CC;
    --color-secondary: #4F46E5;
    --color-accent: #00F5FF;

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

    --bg-body: #050816;
    --bg-primary: #07111F;
    --bg-secondary: #0D1B2A;
    --bg-card: rgba(255,255,255,0.06);
    --bg-card-hover: rgba(255,255,255,0.10);

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

    --text-white: #FFFFFF;
    --text-light: #E5E7EB;
    --text-muted: #A8B3C5;
    --text-dark: #111827;

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

    --border-light: rgba(255,255,255,0.12);
    --border-medium: rgba(255,255,255,0.18);
    --border-strong: rgba(255,255,255,0.28);

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

    --glass-bg: rgba(255,255,255,.08);
    --glass-bg-hover: rgba(255,255,255,.12);

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

    --glass-blur: 18px;

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

    --shadow-xs: 0 2px 8px rgba(0,0,0,.20);

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

    --shadow-md: 0 15px 40px rgba(0,0,0,.30);

    --shadow-lg: 0 25px 60px rgba(0,0,0,.40);

    --shadow-neon: 0 0 20px rgba(0,194,255,.35);

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

    --font-heading: "Space Grotesk", sans-serif;

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

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

    --fs-xs: clamp(.75rem,.72rem + .2vw,.85rem);

    --fs-sm: clamp(.875rem,.84rem + .2vw,1rem);

    --fs-base: clamp(1rem,.98rem + .2vw,1.1rem);

    --fs-md: clamp(1.15rem,1.05rem + .3vw,1.35rem);

    --fs-lg: clamp(1.5rem,1.2rem + .8vw,2rem);

    --fs-xl: clamp(2rem,1.6rem + 1vw,3rem);

    --fs-xxl: clamp(3rem,2rem + 2vw,5rem);

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

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

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

    --space-xxs:.25rem;
    --space-xs:.5rem;
    --space-sm:.75rem;
    --space-md:1rem;
    --space-lg:1.5rem;
    --space-xl:2rem;
    --space-2xl:3rem;
    --space-3xl:5rem;
    --space-4xl:7rem;

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

    --container-width:1280px;

    --container-padding:1.25rem;

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

    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:24px;
    --radius-xl:32px;
    --radius-round:999px;

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

    --btn-height:54px;

    --btn-padding:0 32px;

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

    --transition-fast:.25s ease;

    --transition-normal:.4s ease;

    --transition-slow:.7s ease;

    --transition-smooth:cubic-bezier(.22,.61,.36,1);

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

    --z-preloader:9999;
    --z-navbar:1000;
    --z-overlay:900;
    --z-dropdown:950;
    --z-modal:1200;
    --z-tooltip:1300;

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

    --section-padding:7rem 0;

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

    --image-radius:24px;

    --image-fit:cover;

    /*=========================================================
      NAVIGATION
    =========================================================*/

    --nav-height:85px;

    /*=========================================================
      HERO
    =========================================================*/

    --hero-height:100vh;

    /*=========================================================
      SCROLLBAR
    =========================================================*/

    --scrollbar-width:10px;

}