/*
  MODERN CSS ARCHITECTURE 2025
  =============================
  Base layer: Reset, Variables, Utilities
*/

/* CSS Cascade Layers - 2025 Standard */
@layer reset, tokens, utilities, components, layouts, themes;

@layer reset {
  /* Modern CSS Reset */
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    /* Modern viewport units */
    block-size: 100%;
    color-scheme: light dark;
    scroll-behavior: smooth;
    scroll-padding-top: clamp(1rem, 5vw, 3rem);
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
  }

  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    line-height: 1.6;
    text-rendering: optimizeSpeed;
    min-block-size: 100vh;
    min-block-size: 100dvh; /* Dynamic viewport height */
  }

  /* Remove default list styling */
  ul, ol {
    list-style: none;
  }

  /* Remove default button styling */
  button {
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
  }

  /* Better link defaults */
  a {
    color: inherit;
    text-decoration: none;
  }

  /* Responsive media defaults */
  img, picture, video, canvas, svg {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  /* Remove animations for users who prefer reduced motion */
  @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;
    }
  }
}

@layer tokens {
  :root {
    /* Modern Color System with HDR Support */
    color-scheme: light dark;
    
    /* Brand Colors - Using OKLCH for perceptual uniformity */
    --brand-primary: oklch(67% 0.15 264);
    --brand-secondary: oklch(72% 0.12 345);
    --brand-accent: oklch(76% 0.18 156);
    
    /* Neutral Colors */
    --neutral-50: oklch(98% 0.01 264);
    --neutral-100: oklch(96% 0.01 264);
    --neutral-200: oklch(92% 0.02 264);
    --neutral-300: oklch(87% 0.02 264);
    --neutral-400: oklch(74% 0.03 264);
    --neutral-500: oklch(62% 0.03 264);
    --neutral-600: oklch(51% 0.04 264);
    --neutral-700: oklch(42% 0.04 264);
    --neutral-800: oklch(31% 0.03 264);
    --neutral-900: oklch(22% 0.02 264);
    --neutral-950: oklch(15% 0.01 264);

    /* Semantic Colors */
    --success: oklch(72% 0.15 142);
    --warning: oklch(78% 0.15 85);
    --error: oklch(68% 0.15 15);
    --info: oklch(72% 0.12 220);

    /* Surface Colors with Dynamic Light/Dark */
    --surface-primary: light-dark(var(--neutral-50), var(--neutral-900));
    --surface-secondary: light-dark(var(--neutral-100), var(--neutral-800));
    --surface-tertiary: light-dark(var(--neutral-200), var(--neutral-700));
    
    /* Text Colors */
    --text-primary: light-dark(var(--neutral-900), var(--neutral-100));
    --text-secondary: light-dark(var(--neutral-600), var(--neutral-400));
    --text-tertiary: light-dark(var(--neutral-500), var(--neutral-500));
    
    /* Fluid Typography Scale */
    --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.375rem);
    --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
    --font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
    --font-size-3xl: clamp(1.875rem, 1.6rem + 1.375vw, 3rem);
    --font-size-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 4rem);
    
    /* Fluid Spacing Scale */
    --space-3xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
    --space-2xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
    --space-xs: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);
    --space-sm: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    --space-md: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
    --space-lg: clamp(2rem, 1.6rem + 2vw, 3rem);
    --space-xl: clamp(3rem, 2.4rem + 3vw, 4.5rem);
    --space-2xl: clamp(4rem, 3.2rem + 4vw, 6rem);
    --space-3xl: clamp(6rem, 4.8rem + 6vw, 9rem);

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    /* Animation Duration */
    --duration-instant: 50ms;
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-leisurely: 700ms;

    /* Animation Easing */
    --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-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
    --ease-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6);

    /* Container Sizes */
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --container-full: 100%;
  }
}

@layer utilities {
  /* Modern Utility Classes */
  
  /* Container System */
  .container {
    container-type: inline-size;
    max-inline-size: min(100% - var(--space-md), var(--container-7xl));
    margin-inline: auto;
    padding-inline: var(--space-md);
  }

  /* Flow Utility for Consistent Vertical Rhythm */
  .flow > * + * {
    margin-block-start: var(--flow-space, var(--space-md));
  }

  /* Cluster Layout for Flexible Grouping */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap, var(--space-sm));
    align-items: center;
  }

  /* Stack Layout for Vertical Layouts */
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap, var(--space-md));
  }

  /* Grid Auto-fit */
  .grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-width, 20rem), 1fr));
    gap: var(--gap, var(--space-lg));
  }

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

  /* Skip Link */
  .skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--brand-primary);
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: var(--radius-md);
    z-index: 1000;
  }

  .skip-link:focus {
    top: 6px;
  }

  /* Focus Visible Styles */
  .focus-ring:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* Text Utilities */
  .text-center { text-align: center; }
  .text-left { text-align: left; }
  .text-right { text-align: right; }
  
  /* Font Sizes */
  .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); }
  .text-3xl { font-size: var(--font-size-3xl); }
  .text-4xl { font-size: var(--font-size-4xl); }

  /* Font Weights */
  .font-light { font-weight: 300; }
  .font-normal { font-weight: 400; }
  .font-medium { font-weight: 500; }
  .font-semibold { font-weight: 600; }
  .font-bold { font-weight: 700; }

  /* Colors */
  .text-primary { color: var(--text-primary); }
  .text-secondary { color: var(--text-secondary); }
  .text-tertiary { color: var(--text-tertiary); }
  
  .bg-primary { background-color: var(--surface-primary); }
  .bg-secondary { background-color: var(--surface-secondary); }
  .bg-tertiary { background-color: var(--surface-tertiary); }

  /* Modern Loading State */
  .loading {
    background: linear-gradient(
      90deg, 
      var(--neutral-200) 25%, 
      var(--neutral-300) 50%, 
      var(--neutral-200) 75%
    );
    background-size: 200px 100%;
    animation: shimmer 1.5s infinite;
  }

  @keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
  }
}