/**
 * Modern UI System - Enhanced Design System
 * Version: 2.0.0
 * 
 * Features:
 * - Container Queries for component-driven responsive design
 * - Enhanced CSS Layers for better cascade control
 * - Modern CSS features (nesting, logical properties, @scope)
 * - Performance optimized with reduced specificity
 * - SPARC principles applied to CSS architecture
 */

/* ===============================================
   LAYER DEFINITIONS - Cascade Control
   =============================================== */
@layer reset, tokens, base, layout, components, utilities, overrides;

/* ===============================================
   DESIGN TOKENS LAYER - Core Design System
   =============================================== */
@layer tokens {
  :root {
    /* Modern Spacing Scale - Fluid + Container-Aware */
    --space-unit: clamp(0.25rem, 0.5cqi, 0.5rem);
    --space-2xs: calc(var(--space-unit) * 0.5);
    --space-xs: calc(var(--space-unit) * 1);
    --space-sm: calc(var(--space-unit) * 2);
    --space-md: calc(var(--space-unit) * 3);
    --space-lg: calc(var(--space-unit) * 4);
    --space-xl: calc(var(--space-unit) * 6);
    --space-2xl: calc(var(--space-unit) * 8);
    --space-3xl: calc(var(--space-unit) * 12);

    /* Container-Aware Typography Scale */
    --text-xs: clamp(0.75rem, 2cqi, 0.875rem);
    --text-sm: clamp(0.875rem, 2.5cqi, 1rem);
    --text-base: clamp(1rem, 3cqi, 1.125rem);
    --text-lg: clamp(1.125rem, 3.5cqi, 1.25rem);
    --text-xl: clamp(1.25rem, 4cqi, 1.5rem);
    --text-2xl: clamp(1.5rem, 5cqi, 2rem);
    --text-3xl: clamp(1.875rem, 6cqi, 2.5rem);
    --text-4xl: clamp(2.25rem, 8cqi, 3rem);
    --text-5xl: clamp(3rem, 10cqi, 4rem);

    /* Enhanced Color System with P3 Color Gamut Support */
    @supports (color: oklch(50% 0.2 250)) {
      --primary: oklch(55% 0.25 250);
      --primary-hover: oklch(50% 0.27 250);
      --primary-active: oklch(45% 0.25 250);
      --primary-muted: oklch(55% 0.15 250 / 0.1);
      
      --accent: oklch(75% 0.35 160);
      --accent-hover: oklch(70% 0.37 160);
      
      --success: oklch(60% 0.25 160);
      --warning: oklch(75% 0.15 85);
      --error: oklch(55% 0.22 25);
    }

    /* Fallback for browsers without OKLCH support */
    @supports not (color: oklch(50% 0.2 250)) {
      --primary: #0066ff;
      --primary-hover: #0052cc;
      --primary-active: #003d99;
      --primary-muted: rgba(0, 102, 255, 0.1);
    }

    /* Modern Elevation System */
    --elevation-low: 
      0 1px 2px 0 rgb(0 0 0 / 0.05),
      0 0 0 1px rgb(0 0 0 / 0.02);
    --elevation-medium: 
      0 4px 6px -1px rgb(0 0 0 / 0.07),
      0 2px 4px -2px rgb(0 0 0 / 0.05),
      0 0 0 1px rgb(0 0 0 / 0.02);
    --elevation-high: 
      0 10px 15px -3px rgb(0 0 0 / 0.08),
      0 4px 6px -4px rgb(0 0 0 / 0.05),
      0 0 0 1px rgb(0 0 0 / 0.02);

    /* Animation Tokens */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 350ms;

    /* Layout Tokens */
    --container-xs: 20rem;
    --container-sm: 30rem;
    --container-md: 45rem;
    --container-lg: 65rem;
    --container-xl: 80rem;
  }
}

/* ===============================================
   CONTAINER QUERIES - Component Responsive Design
   =============================================== */
@layer layout {
  /* Container Context Setup */
  .container-context {
    container-type: inline-size;
    container-name: main;
  }

  .card-container {
    container-type: inline-size;
    container-name: card;
  }

  .hero-container {
    container-type: inline-size;
    container-name: hero;
  }

  /* Container Query Responsive Components */
  @container (inline-size > 45rem) {
    .container-responsive {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
      gap: var(--space-lg);
    }
  }

  @container card (inline-size < 25rem) {
    .card-content {
      padding: var(--space-sm);
      font-size: var(--text-sm);
    }
  }

  @container hero (inline-size > 60rem) {
    .hero-title {
      font-size: var(--text-5xl);
      line-height: 1.1;
    }
  }
}

/* ===============================================
   MODERN COMPONENTS - Using Latest CSS Features
   =============================================== */
@layer components {
  /* Modern Button Component with CSS Nesting */
  .btn-modern {
    --btn-padding-x: var(--space-md);
    --btn-padding-y: var(--space-sm);
    --btn-radius: 0.5rem;
    --btn-shadow: var(--elevation-low);
    
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding-block: var(--btn-padding-y);
    padding-inline: var(--btn-padding-x);
    font-weight: 600;
    font-size: var(--text-base);
    line-height: 1;
    color: white;
    background: var(--primary);
    border: 2px solid transparent;
    border-radius: var(--btn-radius);
    box-shadow: var(--btn-shadow);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
    isolation: isolate;
    overflow: hidden;
    
    /* Ripple Effect on Click */
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle, white 10%, transparent 10.01%);
      background-repeat: no-repeat;
      background-position: 50%;
      transform: scale(10, 10);
      opacity: 0;
      transition: transform 0.5s, opacity 1s;
    }
    
    &:active::before {
      transform: scale(0, 0);
      opacity: 0.3;
      transition: 0s;
    }
    
    /* Modern Hover State */
    &:hover {
      transform: translateY(-2px);
      box-shadow: var(--elevation-high);
      background: var(--primary-hover);
    }
    
    /* Focus Visible Only */
    &:focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 3px;
    }
    
    /* Variants using CSS Nesting */
    &.btn-secondary {
      background: transparent;
      color: var(--primary);
      border-color: currentColor;
      
      &:hover {
        background: var(--primary-muted);
        border-color: var(--primary);
      }
    }
    
    &.btn-ghost {
      background: transparent;
      color: var(--primary);
      box-shadow: none;
      
      &:hover {
        background: var(--primary-muted);
      }
    }
    
    /* Size Variants with Container Queries */
    @container (inline-size < 30rem) {
      font-size: var(--text-sm);
      --btn-padding-x: var(--space-sm);
      --btn-padding-y: var(--space-xs);
    }
  }

  /* Modern Card Component */
  .card-modern {
    container-type: inline-size;
    container-name: card;
    
    background: white;
    border-radius: 1rem;
    box-shadow: var(--elevation-low);
    overflow: hidden;
    transition: all var(--duration-base) var(--ease-out);
    
    /* Gradient Border Effect */
    position: relative;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, var(--primary), var(--accent)) border-box;
    border: 2px solid transparent;
    
    &:hover {
      transform: translateY(-4px);
      box-shadow: var(--elevation-high);
    }
    
    /* Responsive Padding Based on Container Width */
    .card-body {
      padding: var(--space-md);
      
      @container card (inline-size > 25rem) {
        padding: var(--space-lg);
      }
      
      @container card (inline-size > 40rem) {
        padding: var(--space-xl);
      }
    }
  }

  /* Advanced Timeline Component */
  .timeline-modern {
    --timeline-line-width: 2px;
    --timeline-dot-size: 1rem;
    
    position: relative;
    padding-inline-start: calc(var(--timeline-dot-size) + var(--space-lg));
    
    /* Vertical Line */
    &::before {
      content: '';
      position: absolute;
      inset-block: 0;
      inset-inline-start: calc(var(--timeline-dot-size) / 2);
      width: var(--timeline-line-width);
      background: linear-gradient(
        to bottom,
        transparent,
        var(--primary) 10%,
        var(--primary) 90%,
        transparent
      );
    }
  }

  .timeline-item {
    position: relative;
    padding-block-end: var(--space-xl);
    
    /* Timeline Dot */
    &::before {
      content: '';
      position: absolute;
      inset-inline-start: calc(var(--timeline-dot-size) * -1 - var(--space-lg) + var(--timeline-dot-size) / 2);
      inset-block-start: 0.25rem;
      width: var(--timeline-dot-size);
      height: var(--timeline-dot-size);
      background: var(--primary);
      border: 3px solid white;
      border-radius: 50%;
      box-shadow: var(--elevation-medium);
      transition: all var(--duration-base) var(--ease-out);
    }
    
    &:hover::before {
      transform: scale(1.3);
      background: var(--accent);
    }
    
    /* Animated Entry */
    animation: timeline-entry 0.5s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 100ms);
  }

  @keyframes timeline-entry {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Glassmorphism Component */
  .glass-card {
    background: color-mix(in srgb, white 20%, transparent);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid color-mix(in srgb, white 30%, transparent);
    border-radius: 1rem;
    box-shadow: 
      0 4px 30px rgba(0, 0, 0, 0.1),
      inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  }

  /* Modern Navigation with View Transitions */
  .nav-modern {
    view-transition-name: navigation;
    
    .nav-link {
      position: relative;
      color: var(--text-color);
      text-decoration: none;
      padding: var(--space-sm) var(--space-md);
      transition: color var(--duration-fast) var(--ease-out);
      
      /* Animated Underline */
      &::after {
        content: '';
        position: absolute;
        inset-block-end: 0;
        inset-inline: var(--space-md);
        height: 2px;
        background: var(--primary);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform var(--duration-base) var(--ease-out);
      }
      
      &:hover::after,
      &[aria-current="page"]::after {
        transform: scaleX(1);
        transform-origin: left;
      }
    }
  }
}

/* ===============================================
   UTILITIES - Modern Utility Classes
   =============================================== */
@layer utilities {
  /* Logical Properties Utilities */
  .p-block-sm { padding-block: var(--space-sm); }
  .p-inline-md { padding-inline: var(--space-md); }
  .m-block-auto { margin-block: auto; }
  .m-inline-auto { margin-inline: auto; }
  
  /* Modern Flexbox/Grid Utilities */
  .flex-modern {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    flex-wrap: wrap;
  }
  
  .grid-modern {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  }
  
  /* Aspect Ratio Utilities */
  .aspect-square { aspect-ratio: 1; }
  .aspect-video { aspect-ratio: 16 / 9; }
  .aspect-golden { aspect-ratio: 1.618; }
  
  /* Text Balancing */
  .text-balance { text-wrap: balance; }
  .text-pretty { text-wrap: pretty; }
  
  /* Modern Scroll Behavior */
  .scroll-smooth { scroll-behavior: smooth; }
  .scroll-padding { scroll-padding-block-start: var(--space-3xl); }
  .overscroll-contain { overscroll-behavior: contain; }
  
  /* Subgrid Support */
  @supports (grid-template-columns: subgrid) {
    .subgrid {
      display: grid;
      grid-template-columns: subgrid;
    }
  }
}

/* ===============================================
   DARK MODE - Modern Implementation
   =============================================== */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    
    --primary: oklch(70% 0.15 250);
    --text-color: oklch(95% 0 0);
    --bg-color: oklch(15% 0 0);
  }
  
  .glass-card {
    background: color-mix(in srgb, black 40%, transparent);
    border-color: color-mix(in srgb, white 10%, transparent);
  }
}

/* ===============================================
   PERFORMANCE OPTIMIZATIONS
   =============================================== */

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

/* Content-visibility for performance */
.content-optimize {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* GPU Acceleration Hints */
.gpu-accelerate {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ===============================================
   PRINT STYLES - Modern Print Optimization
   =============================================== */
@media print {
  @page {
    size: A4;
    margin: 2cm;
  }
  
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  .no-print {
    display: none !important;
  }
  
  a[href^="http"]:after {
    content: " (" attr(href) ")";
  }
}