/*
==========================================================================
LEONUX UI - DESIGN SYSTEM CORE (BASE & UTILITIES)
==========================================================================
Version: 4.0.0 (God Level - Monochrome)
Philosophy: 
  - Absolute Contrast: Pure Black & Pure White.
  - Minimalist Luxury: Typography as the primary interface.
  - Zero-bug policy with defensive CSS.
  - Device-agnostic scaling (300px to 8K).
==========================================================================
*/

/* ---------------------------------- */
/* 1. GLOBAL RESET & NORMALIZATION    */
/* ---------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    -webkit-tap-highlight-color: transparent;
}

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    height: 100%;
}

/* HTML5 display-role reset */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main {
    display: block;
}

ul[role='list'], ol[role='list'] {
    list-style: none;
}

body {
    min-height: 100vh;
    min-height: 100dvh; /* Mobile viewport fix */
    line-height: 1.6;
    text-rendering: optimizeSpeed;
    overflow-x: hidden;
    position: relative;
    width: 100%;
    transition: background-color var(--duration-normal) var(--ease-smooth), color var(--duration-normal) var(--ease-smooth);
    overscroll-behavior-y: none; 
}

/* Media defaults */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
    user-select: none;
}

/* Form control inheritance */
input, button, textarea, select {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
}

/* Focus styles normalization */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

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

/* ---------------------------------- */
/* 2. DESIGN TOKENS (CSS VARIABLES)   */
/* ---------------------------------- */
:root {
    /* --- COLOR PALETTE (GOD LEVEL MONOCHROME) --- */
    /* Primary: Pure White (Dark Mode Accent) */
    --hue-primary: 0;
    --sat-primary: 0%;
    --lig-primary: 100%;
    
    /* Semantic Colors (Retained for feedback, desaturated) */
    --hue-success: 140;
    --hue-warning: 45;
    --hue-error: 0;
    --hue-info: 200;

    /* Generated Colors - DARK MODE DEFAULT */
    --color-primary: #FFFFFF;
    --color-primary-hover: #E0E0E0;
    --color-primary-active: #CCCCCC;
    --color-primary-dim: rgba(255, 255, 255, 0.1);
    --color-primary-glow: rgba(255, 255, 255, 0.15);
    
    --color-secondary: #A0A0A0;
    
    /* High Contrast Semantic Colors */
    --color-success: #00FF9D; /* Neon Green */
    --color-success-bg: rgba(0, 255, 157, 0.1);
    
    --color-warning: #FFD600; /* Neon Yellow */
    --color-warning-bg: rgba(255, 214, 0, 0.1);
    
    --color-error: #FF3D00; /* Neon Red */
    --color-error-bg: rgba(255, 61, 0, 0.1);

    /* --- SURFACES (Abyssal Dark Mode) --- */
    --color-bg-base: #000000;       /* Vantablack style */
    --color-bg-surface-1: #0A0A0A;  /* Deepest Gray */
    --color-bg-surface-2: #141414;  /* Deep Gray */
    --color-bg-surface-3: #1F1F1F;  /* Medium Gray */
    
    /* Glassmorphism (Subtle Frost) */
    --glass-fill: rgba(20, 20, 20, 0.7);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-border-highlight: rgba(255, 255, 255, 0.25);
    --glass-blur: 30px;
    
    /* --- TYPOGRAPHY --- */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    --color-text-main: #FFFFFF;
    --color-text-muted: #888888;
    --color-text-dim: #555555;
    --color-text-inverted: #000000;

    /* --- FLUID TYPOGRAPHY ENGINE (Clamp: Min, Val, Max) --- */
    /* Scales from 320px to 3840px viewports */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
    --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
    --text-lg: clamp(1.125rem, 1rem + 0.625vw, 2rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 2.5rem);
    --text-2xl: clamp(1.5rem, 1.25rem + 1vw, 3rem);
    --text-3xl: clamp(2rem, 1.5rem + 1.5vw, 4rem);
    --text-4xl: clamp(3rem, 2rem + 2vw, 6rem);

    /* --- FLUID SPACING --- */
    --space-2xs: clamp(0.25rem, 0.2rem + 0.1vw, 0.5rem);
    --space-xs:  clamp(0.5rem, 0.4rem + 0.2vw, 1rem);
    --space-sm:  clamp(0.75rem, 0.6rem + 0.3vw, 1.5rem);
    --space-md:  clamp(1rem, 0.8rem + 0.5vw, 2rem);
    --space-lg:  clamp(1.5rem, 1.2rem + 0.8vw, 3rem);
    --space-xl:  clamp(2rem, 1.6rem + 1vw, 4rem);
    --space-2xl: clamp(3rem, 2.4rem + 1.5vw, 6rem);
    
    /* --- BORDERS & RADII --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* --- ANIMATIONS --- */
    --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-smooth: cubic-bezier(0.19, 1, 0.22, 1); /* Exponential Out */
    --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
    
    --duration-fast: 200ms;
    --duration-normal: 400ms;
    --duration-slow: 700ms;
    
    /* --- Z-INDEX --- */
    --z-negative: -1;
    --z-normal: 1;
    --z-hover: 10;
    --z-sticky: 100;
    --z-drawer: 200;
    --z-modal: 300;
    --z-toast: 9999;
}

/* ---------------------------------- */
/* 2a. LIGHT THEME OVERRIDES          */
/* ---------------------------------- */
.light-theme {
    /* --- SURFACES (Blinding Light Mode) --- */
    --color-bg-base: #FFFFFF;       /* Pure White */
    --color-bg-surface-1: #F5F5F5;  /* Off White */
    --color-bg-surface-2: #EAEAEA;  /* Light Gray */
    --color-bg-surface-3: #DDDDDD;  /* Medium Gray */
    
    /* Glassmorphism (Light) */
    --glass-fill: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-border-highlight: rgba(0, 0, 0, 0.04);
    
    /* --- TYPOGRAPHY (Light) --- */
    --color-text-main: #000000;     /* Pure Black */
    --color-text-muted: #555555;
    --color-text-dim: #888888;
    --color-text-inverted: #FFFFFF;

    /* --- PRIMARY COLOR (Black Accent) --- */
    --color-primary: #000000;
    --color-primary-hover: #333333;
    --color-primary-active: #555555;
    --color-primary-dim: rgba(0, 0, 0, 0.05);
    --color-primary-glow: rgba(0, 0, 0, 0.1);
}

/* ---------------------------------- */
/* 3. CORE BODY STYLES                */
/* ---------------------------------- */
body {
    background-color: var(--color-bg-base);
    color: var(--color-text-main);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    letter-spacing: -0.02em; /* Tighter tracking for modern look */
    display: flex;
    flex-direction: row;
}

/* ---------------------------------- */
/* 4. UTILITY CLASSES                 */
/* ---------------------------------- */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }

/* Flexbox Utilities */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

/* Typography */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.font-mono { font-family: var(--font-mono); }
.font-bold { font-weight: 800; }
.font-semibold { font-weight: 600; }
.text-dim { color: var(--color-text-dim); }
.text-primary { color: var(--color-primary); }
.text-error { color: var(--color-error); }
.text-success { color: var(--color-success); }

/* Icons */
.icon-sm { font-size: 1.25rem !important; }
.icon-md { font-size: 1.5rem !important; }
.icon-lg { font-size: 2.5rem !important; }
.icon-xl { font-size: clamp(3rem, 5vw, 5rem) !important; }

/* Spacing */
.m-0 { margin: 0; }
.mt-auto { margin-top: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.p-0 { padding: 0; }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }

/* Effects */
.glass-panel {
    background: var(--glass-fill);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5); /* Deep shadow */
}

.no-select { user-select: none; -webkit-user-select: none; }
.pointer { cursor: pointer; }

/* A11y */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ---------------------------------- */
/* 5. PRINT STYLES                    */
/* ---------------------------------- */
@media print {
    @page { margin: 1cm; size: A4 portrait; }
    
    body {
        background: white !important;
        color: black !important;
        display: block !important;
        font-size: 12pt;
    }
    
    .app-rail, .nav-btn, .action-fab, #toast {
        display: none !important;
    }
    
    .view-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        page-break-inside: avoid;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .g-card {
        border: 2px solid #000; /* High contrast border for print */
        box-shadow: none;
        background: transparent;
        color: black;
        break-inside: avoid;
    }

    /* Expand collapsed content for print */
    .hidden { display: block !important; }
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
}