/*!
 * SIG Website - Complete CSS Framework
 * Professional styling system inspired by GrapheneOS
 * 
 * Components:
 * - Core: Variables, reset, layout utilities
 * - Components: Navigation, buttons, cards, forms
 * - Terminal: Advanced terminal simulation styling
 * - Pages: Page-specific styles and layouts
 * - Utilities: Helper classes and special effects
 * 
 * Author: SIG Development Team
 * Version: 2.0.0
 */

/* Import Core Framework */
@import url('./core.css');

/* Import Component Styles */
@import url('./components.css');

/* Import Terminal Styles */
@import url('./terminal.css');

/* Import Page-Specific Styles */
@import url('./pages.css');

/* Import Utility Classes */
@import url('./utilities.css');

/* ==================== CUSTOM PROPERTIES FOR DYNAMIC THEMING ==================== */
:root {
  /* Additional Custom Properties */
  --header-height: 70px;
  --sidebar-width: 280px;
  --content-max-width: 1200px;
  --mobile-breakpoint: 768px;
  
  /* Enhanced Color Palette */
  --success-light: #c6f6d5;
  --success-dark: #2f855a;
  --warning-light: #fbd38d;
  --warning-dark: #c05621;
  --error-light: #fed7d7;
  --error-dark: #c53030;
  --info-light: #bee3f8;
  --info-dark: #2b6cb0;
  
  /* Advanced Typography */
  --font-mono: 'Fira Code', 'SF Mono', Monaco, 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-serif: 'Times New Roman', Times, serif;
  
  /* Enhanced Spacing Scale */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --space-36: 9rem;
  --space-40: 10rem;
  --space-44: 11rem;
  --space-48: 12rem;
  --space-52: 13rem;
  --space-56: 14rem;
  --space-60: 15rem;
  --space-64: 16rem;
  --space-72: 18rem;
  --space-80: 20rem;
  --space-96: 24rem;
  
  /* Enhanced Shadows */
  --shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.05);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-outline: 0 0 0 3px rgba(66, 153, 225, 0.5);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* Animation Curves */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ==================== ENHANCED GLOBAL STYLES ==================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  height: 100%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* ==================== ENHANCED SELECTION STYLES ==================== */
::selection {
  background-color: rgba(66, 153, 225, 0.3);
  color: var(--text-primary);
}

::-moz-selection {
  background-color: rgba(66, 153, 225, 0.3);
  color: var(--text-primary);
}

/* ==================== ENHANCED SCROLLBAR STYLES ==================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-blue);
}

::-webkit-scrollbar-corner {
  background: var(--bg-secondary);
}

/* Firefox Scrollbar */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--border-medium) var(--bg-secondary);
}

/* ==================== FOCUS MANAGEMENT ==================== */
*:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.focus\:outline-none:focus {
  outline: none;
}

.focus\:ring:focus {
  outline: none;
  box-shadow: var(--shadow-outline);
}

/* ==================== ENHANCED RESPONSIVE DESIGN ==================== */
@media (max-width: 640px) {
  :root {
    --font-size-xs: 0.7rem;
    --font-size-sm: 0.8rem;
    --font-size-base: 0.9rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.1rem;
    --font-size-2xl: 1.3rem;
    --font-size-3xl: 1.6rem;
    --font-size-4xl: 1.9rem;
    --font-size-5xl: 2.2rem;
  }
  
  html {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  :root {
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 2.5rem;
  }
  
  html {
    font-size: 13px;
  }
}

/* ==================== PERFORMANCE OPTIMIZATIONS ==================== */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

.will-change-scroll {
  will-change: scroll-position;
}

.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* ==================== PRINT OPTIMIZATIONS ==================== */
@media print {
  *,
  *::before,
  *::after {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a,
  a:visited {
    text-decoration: underline;
  }
  
  a[href^="http"]:after {
    content: " (" attr(href) ")";
  }
  
  .no-print {
    display: none !important;
  }
  
  .print-break-before {
    page-break-before: always;
  }
  
  .print-break-after {
    page-break-after: always;
  }
  
  .print-break-inside-avoid {
    page-break-inside: avoid;
  }
}

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

@media (prefers-contrast: high) {
  :root {
    --text-primary: #000000;
    --text-secondary: #333333;
    --bg-primary: #ffffff;
    --border-light: #000000;
  }
}

/* ==================== COMPONENT OVERRIDES ==================== */
.btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.card:focus-within {
  box-shadow: var(--shadow-xl), var(--shadow-outline);
}

.nav-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ==================== DEBUGGING UTILITIES (Development Only) ==================== */
.debug * {
  outline: 1px solid red !important;
}

.debug-grid {
  background-image: 
    linear-gradient(rgba(255, 0, 0, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 0, 0, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Remove debugging in production */
@media (min-width: 1px) {
  .debug,
  .debug-grid {
    background-image: none !important;
  }
  
  .debug * {
    outline: none !important;
  }
}