/*
 * ═══════════════════════════════════════════════════════════
 *  INTELLIGENCE DEPARTMENT OS - RESPONSIVE CORE SYSTEM
 *  Automatisches UI-Scaling für alle Bildschirmgrößen
 * ═══════════════════════════════════════════════════════════
 */

:root {
    /* ========================================
       BREAKPOINTS (Media Query Reference)
       ======================================== */
    --breakpoint-xs: 320px;   /* Mobile Portrait */
    --breakpoint-sm: 480px;   /* Mobile Landscape */
    --breakpoint-md: 768px;   /* Tablets */
    --breakpoint-lg: 1024px;  /* Laptops */
    --breakpoint-xl: 1440px;  /* Desktop */
    --breakpoint-2xl: 1920px; /* Large Desktop/Ultra-Wide */

    /* ========================================
       FLUID TYPOGRAPHY SYSTEM (Modular Scale)
       DEAKTIVIERT - Verwende Original-Werte
       ======================================== */
    
    /* Type Scale - konservative Werte */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-md: 1.125rem;     /* 18px */
    --font-size-lg: 1.25rem;      /* 20px */
    --font-size-xl: 1.5rem;       /* 24px */
    --font-size-2xl: 2rem;        /* 32px */
    --font-size-3xl: 2.5rem;      /* 40px */

    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ========================================
       SPACING SYSTEM - FESTE WERTE
       Konsistente Abstände
       ======================================== */
    
    --space-xs: 0.25rem;    /* 4px */
    --space-sm: 0.5rem;     /* 8px */
    --space-md: 1rem;       /* 16px */
    --space-lg: 1.5rem;     /* 24px */
    --space-xl: 2rem;       /* 32px */
    --space-2xl: 3rem;      /* 48px */
    --space-3xl: 4rem;      /* 64px */

    /* ========================================
       CONTAINER SYSTEM
       Max-Width Constraints für Lesbarkeit
       ======================================== */
    
    --container-xs: min(95vw, 480px);
    --container-sm: min(92vw, 640px);
    --container-md: min(90vw, 768px);
    --container-lg: min(88vw, 1024px);
    --container-xl: min(85vw, 1280px);
    --container-2xl: min(82vw, 1536px);
    --container-full: 100vw;

    /* ========================================
       ADAPTIVE COMPONENT SIZES
       Touch-Targets, Buttons, Controls (fluid)
       ======================================== */
    
    /* Minimum Touch Target (WCAG 2.2 Level AAA) */
    --touch-target-min: 44px;
    
    /* Button Sizes (fluid scaling) */
    --btn-height-sm: clamp(32px, 6vh, 40px);
    --btn-height-md: clamp(36px, 7vh, 48px);
    --btn-height-lg: clamp(40px, 8vh, 56px);
    
    --btn-padding-x-sm: clamp(0.5rem, 1.5vw, 0.75rem);
    --btn-padding-x-md: clamp(0.75rem, 2vw, 1.25rem);
    --btn-padding-x-lg: clamp(1rem, 2.5vw, 1.5rem);
    
    /* Input/Form Controls (fluid) */
    --input-height: clamp(36px, 7vh, 48px);
    --input-padding-x: clamp(0.5rem, 1.5vw, 1rem);
    --input-padding-y: clamp(0.5rem, 1vw, 0.75rem);

    /* ========================================
       WINDOW SYSTEM (Desktop Apps)
       Fluid Window Sizes
       ======================================== */
    
    /* Default Window Sizes (fluid scaling) */
    --window-width-xs: 95vw;
    --window-width-sm: 90vw;
    --window-width-md: min(85vw, 700px);
    --window-width-lg: min(70vw, 800px);
    --window-width-xl: min(60vw, 700px);
    
    --window-height-xs: 90vh;
    --window-height-sm: 85vh;
    --window-height-md: min(80vh, 650px);
    --window-height-lg: min(70vh, 600px);
    --window-height-xl: min(60vh, 550px);
    
    --window-max-width: min(80vw, 1200px);
    --window-max-height: min(75vh, 800px);
    --window-min-width: 320px;
    --window-min-height: 400px;

    /* ========================================
       TASKBAR & TOPBAR
       Fluid Heights for all screen sizes
       ======================================== */
    
    --taskbar-height: clamp(50px, 6vh, 80px);
    --topbar-height: clamp(50px, 6vh, 70px);
    --topbar-padding: clamp(0.5rem, 1.5vw, 1.5rem);

    /* ========================================
       BORDER RADIUS (Skalierbar)
       ======================================== */
    
    --radius-sm: clamp(4px, 0.5vw, 8px);
    --radius-md: clamp(8px, 1vw, 12px);
    --radius-lg: clamp(12px, 1.5vw, 20px);
    --radius-xl: clamp(16px, 2vw, 24px);
    
    /* ========================================
       Z-INDEX LAYERS
       Konsistente Stacking-Order
       ======================================== */
    
    --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;
    --z-notification: 1080;
    --z-overlay: 9000;
    --z-broadcast: 9500;
    --z-alarm: 10000;

    /* ========================================
       ANIMATION TIMING
       Performance-optimiert
       ======================================== */
    
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    
    /* Animation Control (respektiert prefers-reduced-motion) */
    --animation-duration: 0.3s;
    --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   REDUCED MOTION FALLBACK
   Respektiert OS-Präferenz
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
        --animation-duration: 0s;
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   ROOT FONT SIZE ADJUSTMENT
   Basis für rem-Einheiten
   ======================================== */

html {
    /* Font-Size wird NICHT überschrieben - bleibt bei Browser-Default 16px */
    /* Smooth-Scrolling (außer bei reduced-motion) */
    scroll-behavior: smooth;
}

/* ========================================
   USER ZOOM LEVELS (via data-attribute)
   DEAKTIVIERT - Verhindert Layout-Probleme
   ======================================== */

html[data-zoom="90"] {
    /* Deaktiviert */
}

html[data-zoom="100"] {
    /* Standard */
}

html[data-zoom="125"] {
    /* Deaktiviert */
}

html[data-zoom="150"] {
    /* Deaktiviert */
}

html[data-zoom="200"] {
    /* Deaktiviert */
}

/* ========================================
   UTILITY CLASSES
   Häufig verwendete Patterns
   ======================================== */

/* Container */
.container {
    width: 100%;
    max-width: var(--container-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

.container-fluid {
    width: 100%;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

/* Spacing Utilities */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* Text Utilities */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }

/* Responsive Utilities */
.hide-on-mobile { display: none; }
.show-on-mobile { display: block; }

@media (min-width: 768px) {
    .hide-on-mobile { display: block; }
    .show-on-mobile { display: none; }
}

/* Touch-Target Garantie */
.touch-target {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
}

/* ========================================
   BREAKPOINT-SPEZIFISCHE OVERRIDES
   Media Queries für progressive Enhancement
   ======================================== */

/* Extra Small Devices (< 480px) */
@media (max-width: 479px) {
    :root {
        --taskbar-height: 60px;
        --topbar-height: 60px;
    }
}

/* Small Devices (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
    :root {
        --taskbar-height: 70px;
        --topbar-height: 70px;
    }
}

/* Medium Devices (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --taskbar-height: 80px;
        --topbar-height: 80px;
    }
}

/* Large Devices (1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
    :root {
        --taskbar-height: 70px;
        --topbar-height: 65px;
        --window-width-lg: min(80vw, 800px);
        --window-height-lg: min(75vh, 600px);
    }
}

/* Extra Large Devices (1440px+) */
@media (min-width: 1440px) {
    :root {
        --taskbar-height: 100px;
        --topbar-height: 90px;
    }
}

/* Ultra-Wide Displays (2560px+) - Max-Width-Constraints */
@media (min-width: 2560px) {
    .container {
        max-width: 1920px; /* Lesbarkeitsgrenze */
    }
}

/* ========================================
   HIGH DPI / RETINA DISPLAYS
   Schärfere Rendering-Optimierungen
   ======================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ========================================
   PRINT STYLES
   Optimierung für Druck/PDF-Export
   ======================================== */

@media print {
    :root {
        --font-size-root: 12pt;
    }
    
    .no-print,
    .taskbar,
    .top-bar,
    .window-controls {
        display: none !important;
    }
}

/*
 * ═══════════════════════════════════════════════════════════
 *  END OF RESPONSIVE CORE SYSTEM
 *  Importiere diese Datei VOR allen anderen Stylesheets!
 * ═══════════════════════════════════════════════════════════
 */