/* ==========================================================
   A SQUARE L INNOVATE DESIGN SYSTEM (ASLDS)
   File: variables.css
   Version: 1.1
   Author: A Square L Innovate
   ========================================================== */

:root {

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

    --primary-gold: #D4AF37;
    --primary-gold-hover: #E5C158;
    --dark-gold: #B8860B;
    --gold-light: #F5E7A1;

    --black: #000000;
    --background: #050505;
    --surface: #0B0B0B;
    --card-bg: #111111;
    --card-hover: #1A1A1A;

    --white: #FFFFFF;
    --gray-100: #F5F5F5;
    --gray-200: #DDDDDD;
    --gray-300: #C9C9C9;
    --gray-400: #B3B3B3;
    --gray-500: #999999;
    --gray-600: #777777;
    --gray-700: #555555;
    --gray-800: #333333;
    --gray-900: #1A1A1A;

    --border-color: #222222;

    /* Status Colors */

    --success: #22C55E;
    --warning: #FACC15;
    --danger: #EF4444;
    --info: #3B82F6;

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

    --font-family: 'Nunito', sans-serif;

    /* Font Sizes */

    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: 30px;
    --fs-4xl: 36px;
    --fs-5xl: 48px;
    --fs-6xl: 64px;

    /* Font Weights */

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

    /* Line Heights */

    --lh-tight: 1.2;
    --lh-normal: 1.6;
    --lh-relaxed: 1.8;

    /* ======================================================
       SPACING SYSTEM (8px Grid)
    ====================================================== */

    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;
    --space-7: 56px;
    --space-8: 64px;
    --space-9: 80px;
    --space-10: 96px;
    --space-11: 120px;

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

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-round: 999px;

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

    --shadow-sm: 0 2px 8px rgba(0,0,0,.15);
    --shadow-md: 0 8px 20px rgba(0,0,0,.25);
    --shadow-lg: 0 15px 40px rgba(0,0,0,.35);
    --shadow-gold: 0 0 15px rgba(212,175,55,.20);

        /* ======================================================
       GOLD GLOW TINTS
       Used for ambient glow effects on sections and cards.
    ====================================================== */

    --gold-glow-strong: rgba(212,175,55,.16);
    --gold-glow-medium: rgba(212,175,55,.08);
    --gold-glow-soft:   rgba(212,175,55,.04);

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

    --glass-bg: rgba(255,255,255,.04);
    --glass-border: rgba(255,255,255,.08);
    --glass-blur: blur(10px);

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

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.6s ease;

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

    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-navbar: 1030;
    --z-modal: 1050;
    --z-tooltip: 1060;
    --z-toast: 1070;
    --z-loader: 1200;

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

    --container-width: 1200px;
    --container-padding: 24px;

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

    --navbar-height: 75px;

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

    --sidebar-width: 280px;

    /* ======================================================
       COURSE COMPONENTS
    ====================================================== */

    --course-card-height: 340px;
    --lesson-sidebar-width: 320px;
    --progress-height: 8px;

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

    --btn-height: 50px;
    --btn-padding: 0 28px;

    /* ======================================================
       INPUTS
    ====================================================== */

    --input-height: 52px;

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

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

        /* ======================================================
       COMPATIBILITY ALIASES
    ====================================================== */

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

    --shadow-xl:     0 20px 60px rgba(0,0,0,.45);
    --container-xl:  1400px;

    /* ======================================================
       NAVBAR SURFACE (theme-aware)
    ====================================================== */

    --navbar-bg:         rgba(0,0,0,.82);
    --navbar-mobile-bg:  rgba(0,0,0,.95);
}


/* ==========================================================
   LIGHT THEME
========================================================== */

:root[data-theme="light"] {

    --background: #F8FAFC;
    --surface: #FFFFFF;
    --card-bg: #FFFFFF;
    --card-hover: #F3F4F6;

    --white: #111111;

    --gray-100: #111111;
    --gray-200: #333333;
    --gray-300: #555555;
    --gray-400: #777777;
    --gray-500: #888888;
    --gray-600: #999999;
    --gray-700: #BBBBBB;
    --gray-800: #DDDDDD;
    --gray-900: #F5F5F5;

    --border-color: #C8CDD4;

    --glass-bg: rgba(255,255,255,.75);
    --glass-border: rgba(0,0,0,.08);

    --navbar-bg:         rgba(255,255,255,.82);
    --navbar-mobile-bg:  rgba(255,255,255,.95);
}


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

:root[data-theme="dark"] {

    --background: #050505;
    --surface: #0B0B0B;
    --card-bg: #111111;
    --card-hover: #1A1A1A;

    --white: #FFFFFF;

    --gray-100: #F5F5F5;
    --gray-200: #DDDDDD;
    --gray-300: #C9C9C9;
    --gray-400: #B3B3B3;
    --gray-500: #999999;
    --gray-600: #777777;
    --gray-700: #555555;
    --gray-800: #333333;
    --gray-900: #1A1A1A;

    --border-color: #222222;

    --glass-bg: rgba(255,255,255,.04);
    --glass-border: rgba(255,255,255,.08);

}


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

/*
   Prevents FOUC (Flash of Unstyled Content) on page load.
   The .theme-transitioning class is added/removed by theme.js
   to control when transitions are active.
*/

:root:not(.theme-transitioning) {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Disable all transitions during theme switching to prevent flash */
:root.theme-transitioning * {
    transition: none !important;
}

/*
   Optional: Smooth transition for theme toggle buttons
   Makes the button text feel more responsive
*/
[data-theme-toggle] {
    transition: opacity 0.2s ease;
}

[data-theme-toggle]:active {
    opacity: 0.6;
}