/* ==========================================================================
   NODRA ACADEMY
   Design System
   File: variables.css
   Version: 0.1
   ========================================================================== */

/* ==========================================================================
   GOOGLE FONTS
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap");

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

:root {

    /* Brand */

    --primary: #4DA6FF;
    --primary-light: #78BEFF;
    --primary-dark: #2B82D9;

    /* Background */

    --background: #06080D;
    --background-secondary: #0B111A;
    --background-tertiary: #111A26;

    /* Surface */

    --surface-1: #0E1622;
    --surface-2: #131D2A;
    --surface-3: #182434;

    /* Borders */

    --border: #223246;
    --border-light: #2E4763;

    /* Text */

    --text: #EDF4FB;
    --text-secondary: #A3B3C6;
    --text-muted: #73869C;

    /* States */

    --success: #28C76F;
    --warning: #FFB547;
    --danger: #FF5E7A;

    /* Shadows */

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

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

    --shadow-md: 0 18px 45px rgba(0,0,0,.35);

    --shadow-lg: 0 35px 70px rgba(0,0,0,.45);

    /* Glow */

    --glow-primary: 0 0 30px rgba(77,166,255,.25);

    --glow-strong: 0 0 60px rgba(77,166,255,.35);

}

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

:root{

    --font-heading: "Barlow Condensed", sans-serif;

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

}

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

:root{

    --text-xs: .75rem;

    --text-sm: .875rem;

    --text-base: 1rem;

    --text-lg: 1.125rem;

    --text-xl: 1.35rem;

    --text-2xl: 1.75rem;

    --text-3xl: 2.25rem;

    --text-4xl: 3rem;

    --text-5xl: 4rem;

    --text-6xl: 5rem;

}

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

:root{

    --light:300;

    --regular:400;

    --medium:500;

    --semibold:600;

    --bold:700;

    --extrabold:800;

    --black:900;

}

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

:root{

    --space-1:4px;

    --space-2:8px;

    --space-3:12px;

    --space-4:16px;

    --space-5:20px;

    --space-6:24px;

    --space-8:32px;

    --space-10:40px;

    --space-12:48px;

    --space-16:64px;

    --space-20:80px;

    --space-24:96px;

    --space-32:128px;

}

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

:root{

    --radius-sm:8px;

    --radius-md:12px;

    --radius-lg:16px;

    --radius-xl:20px;

    --radius-2xl:28px;

    --radius-pill:999px;

}

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

:root{

    --transition-fast:.15s ease;

    --transition:.25s ease;

    --transition-slow:.45s ease;

}

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

:root{

    --container:1400px;

    --navbar-height:80px;

    --sidebar-width:300px;

}

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

:root{

    --z-navbar:1000;

    --z-sidebar:900;

    --z-modal:9999;

}

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

:root{

    --gradient-background:

        radial-gradient(circle at top,
            rgba(77,166,255,.12),
            transparent 40%),

        radial-gradient(circle at bottom right,
            rgba(77,166,255,.05),
            transparent 45%),

        #06080D;

}

/* ==========================================================================
   GRID
   ========================================================================== */

:root{

    --grid-color:rgba(255,255,255,.03);

}

/* ==========================================================================
   NOISE
   ========================================================================== */

:root{

    --noise-opacity:.035;

}

/* ==========================================================================
   CARDS
   ========================================================================== */

:root{

    --card-padding:32px;

    --card-gap:24px;

}

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

:root{

    --hero-title:clamp(4rem,8vw,7rem);

    --hero-subtitle:1.25rem;

}

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

:root{

    --button-height:54px;

    --button-padding:0 28px;

}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

:root{

    --sidebar-gap:18px;

}

/* ==========================================================================
   MODULES
   ========================================================================== */

:root{

    --module-card-height:320px;

}

/* ==========================================================================
   PROGRESS
   ========================================================================== */

:root{

    --progress-size:12px;

}

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

   640
   768
   1024
   1280
   1536

   ========================================================================== */