/**
 * Bheem Academy Design System 2025
 * Futuristic Minimal AI Learning Platform
 * Apple HIG + Cyber-Academia Aesthetic
 */

/* ================================================
   DESIGN TOKENS - FOUNDATION
   ================================================ */

:root {
    /* ====== Color System ====== */

    /* Primary Palette - Violet/Indigo/Cyan */
    --color-primary-violet: #8B5CF6;
    --color-primary-indigo: #6366F1;
    --color-primary-cyan: #06B6D4;

    /* Gradient Mesh - Background */
    --gradient-mesh-light:
        radial-gradient(at 0% 0%, rgba(139, 92, 246, 0.15) 0px, transparent 50%),
        radial-gradient(at 50% 0%, rgba(99, 102, 241, 0.12) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(6, 182, 212, 0.10) 0px, transparent 50%);

    --gradient-mesh-dark:
        radial-gradient(at 0% 0%, rgba(139, 92, 246, 0.25) 0px, transparent 50%),
        radial-gradient(at 50% 0%, rgba(99, 102, 241, 0.20) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(6, 182, 212, 0.15) 0px, transparent 50%);

    /* Neutral Scale - Light Mode */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F9FAFB;
    --color-bg-tertiary: #F3F4F6;
    --color-surface: rgba(255, 255, 255, 0.8);

    --color-text-primary: #111827;
    --color-text-secondary: #6B7280;
    --color-text-tertiary: #9CA3AF;

    --color-border: rgba(0, 0, 0, 0.08);
    --color-divider: rgba(0, 0, 0, 0.06);

    /* ====== Typography Scale ====== */
    --font-family-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
    --font-family-mono: "SF Mono", "Roboto Mono", "Fira Code", monospace;

    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */
    --font-size-5xl: 3rem;        /* 48px */

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ====== Spacing Scale (4px base) ====== */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */

    /* ====== Border Radius ====== */
    --radius-sm: 0.375rem;    /* 6px */
    --radius-base: 0.5rem;    /* 8px */
    --radius-md: 0.75rem;     /* 12px */
    --radius-lg: 1rem;        /* 16px */
    --radius-xl: 1.5rem;      /* 24px */
    --radius-2xl: 2rem;       /* 32px */
    --radius-full: 9999px;

    /* ====== Elevation & Shadows ====== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* Glassmorphism Glow */
    --glow-violet: 0 0 20px rgba(139, 92, 246, 0.2);
    --glow-indigo: 0 0 20px rgba(99, 102, 241, 0.2);
    --glow-cyan: 0 0 20px rgba(6, 182, 212, 0.2);

    /* ====== Transitions ====== */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ====== Z-Index Scale ====== */
    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ================================================
   DARK MODE TOKENS
   ================================================ */

[data-theme="dark"] {
    --color-bg-primary: #0F172A;
    --color-bg-secondary: #1E293B;
    --color-bg-tertiary: #334155;
    --color-surface: rgba(30, 41, 59, 0.8);

    --color-text-primary: #F8FAFC;
    --color-text-secondary: #CBD5E1;
    --color-text-tertiary: #94A3B8;

    --color-border: rgba(255, 255, 255, 0.1);
    --color-divider: rgba(255, 255, 255, 0.06);

    /* Enhanced glow for dark mode */
    --glow-violet: 0 0 30px rgba(139, 92, 246, 0.4);
    --glow-indigo: 0 0 30px rgba(99, 102, 241, 0.4);
    --glow-cyan: 0 0 30px rgba(6, 182, 212, 0.4);
}

/* ================================================
   BASE STYLES - MINIMAL FOUNDATION
   ================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    transition: background-color var(--transition-base), color var(--transition-base);
}

/* ================================================
   GRADIENT MESH BACKGROUND
   ================================================ */

.gradient-mesh-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--gradient-mesh-light);
    z-index: -1;
    pointer-events: none;
}

[data-theme="dark"] .gradient-mesh-bg {
    background: var(--gradient-mesh-dark);
}

/* Animated mesh variant */
.gradient-mesh-bg.animated {
    animation: meshFloat 20s ease-in-out infinite;
}

@keyframes meshFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-20px) scale(1.02);
    }
}

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

.glass-card {
    background: var(--color-surface);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.glass-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--glow-violet);
    border-color: rgba(139, 92, 246, 0.3);
}

/* Card variants */
.glass-card-sm {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
}

.glass-card-lg {
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
}

/* Accent colors */
.glass-card-violet {
    border-color: rgba(139, 92, 246, 0.2);
}

.glass-card-violet:hover {
    box-shadow: var(--shadow-lg), var(--glow-violet);
}

.glass-card-indigo {
    border-color: rgba(99, 102, 241, 0.2);
}

.glass-card-indigo:hover {
    box-shadow: var(--shadow-lg), var(--glow-indigo);
}

.glass-card-cyan {
    border-color: rgba(6, 182, 212, 0.2);
}

.glass-card-cyan:hover {
    box-shadow: var(--shadow-lg), var(--glow-cyan);
}

/* ================================================
   GRADIENT HEADINGS
   ================================================ */

.gradient-heading {
    background: linear-gradient(135deg, var(--color-primary-violet), var(--color-primary-indigo), var(--color-primary-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: var(--font-weight-bold);
}

.gradient-heading-animated {
    background-size: 200% auto;
    animation: gradientShift 4s linear infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

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

h1, .text-5xl { font-size: var(--font-size-5xl); line-height: var(--line-height-tight); }
h2, .text-4xl { font-size: var(--font-size-4xl); line-height: var(--line-height-tight); }
h3, .text-3xl { font-size: var(--font-size-3xl); line-height: var(--line-height-normal); }
h4, .text-2xl { font-size: var(--font-size-2xl); line-height: var(--line-height-normal); }
h5, .text-xl { font-size: var(--font-size-xl); line-height: var(--line-height-normal); }
h6, .text-lg { font-size: var(--font-size-lg); line-height: var(--line-height-normal); }

.text-base { font-size: var(--font-size-base); }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }

.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }

/* ================================================
   LAYOUT SYSTEM - SMART SPACING
   ================================================ */

.container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

@media (min-width: 640px) {
    .container {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }
}

/* Grid System */
.grid {
    display: grid;
    gap: var(--space-6);
}

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 768px) {
    .grid-cols-2, .grid-cols-3, .grid-cols-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .grid-cols-3, .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Flex System */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Spacing Utilities */
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* ================================================
   RESPONSIVE UTILITIES
   ================================================ */

/* Mobile-first breakpoints */
@media (max-width: 639px) {
    .sm\:hidden { display: none; }
}

@media (min-width: 640px) {
    .sm\:block { display: block; }
    .sm\:flex { display: flex; }
    .sm\:grid { display: grid; }
}

@media (min-width: 768px) {
    .md\:block { display: block; }
    .md\:flex { display: flex; }
    .md\:grid { display: grid; }
}

@media (min-width: 1024px) {
    .lg\:block { display: block; }
    .lg\:flex { display: flex; }
    .lg\:grid { display: grid; }
}

/* ================================================
   ACCESSIBILITY & PERFORMANCE
   ================================================ */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus states */
:focus-visible {
    outline: 2px solid var(--color-primary-violet);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Selection */
::selection {
    background-color: rgba(139, 92, 246, 0.2);
    color: var(--color-text-primary);
}