/* =========================================
   Base Sprite Layer
   Structural defaults only
   ========================================= */

   :root {
    --nx-space-1: 4px;
    --nx-space-2: 8px;
    --nx-space-3: 12px;
    --nx-space-4: 16px;
    --nx-space-5: 20px;
    --nx-space-6: 24px;
    --nx-space-8: 32px;
  
    --nx-radius-sm: 8px;
    --nx-radius-md: 12px;
    --nx-radius-lg: 16px;
    --nx-radius-xl: 20px;
  
    --nx-container-max: 1200px;
    --nx-grid-gap: 16px;
    --nx-stack-gap: 12px;
    --nx-panel-padding: 16px;
    --nx-card-padding: 16px;
    --nx-toolbar-gap: 12px;
    --nx-icon-size: 1em;
  }

  /* -----------------------------------------
     Icons
     Supports sprite sheets, CSS icon fonts, and ligature icon fonts.
     ----------------------------------------- */
  .nx-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nx-icon-size);
    height: var(--nx-icon-size);
    flex: 0 0 auto;
    color: currentColor;
    font-size: var(--nx-icon-size);
    line-height: 1;
    text-align: center;
    vertical-align: -0.125em;
  }

  .nx-icon--font,
  .nx-icon--font-class,
  .nx-icon--class,
  .nx-icon--ligature,
  .nx-icon--font-ligature {
    width: auto;
    height: auto;
    font-size: var(--nx-icon-size);
    line-height: 1;
  }

  .nx-icon--ligature,
  .nx-icon--font-ligature {
    direction: ltr;
    font-feature-settings: "liga";
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
  }

  .nx-icon--sprite,
  .nx-icon--sheet,
  .nx-icon--sprite-sheet {
    width: var(--nx-icon-size);
    height: var(--nx-icon-size);
    font-size: 0;
    line-height: 0;
  }
  
  /* predictable box sizing for sprite subtree */
  .nx-container,
  .nx-container *,
  .nx-grid,
  .nx-grid *,
  .nx-stack,
  .nx-stack *,
  .nx-panel,
  .nx-panel *,
  .nx-card,
  .nx-card *,
  .nx-toolbar,
  .nx-toolbar * {
    box-sizing: border-box;
  }
  
  /* -----------------------------------------
     Container
     ----------------------------------------- */
  .nx-container {
    width: 100%;
    max-width: var(--nx-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--nx-space-4);
    padding-right: var(--nx-space-4);
  }
  
  .nx-container--fluid {
    max-width: none;
  }
  
  .nx-container--narrow {
    max-width: 900px;
  }
  
  .nx-container--wide {
    max-width: 1440px;
  }
  
  /* -----------------------------------------
     Grid
     ----------------------------------------- */
  .nx-grid {
    display: grid;
    gap: var(--nx-grid-gap);
    min-width: 0;
  }
  
  .nx-grid > * {
    min-width: 0;
  }
  
  .nx-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .nx-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .nx-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  
  .nx-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  
  .nx-grid--tight {
    gap: var(--nx-space-3);
  }
  
  .nx-grid--loose {
    gap: var(--nx-space-6);
  }
  
  /* -----------------------------------------
     Stack
     ----------------------------------------- */
  .nx-stack {
    display: flex;
    flex-direction: column;
    gap: var(--nx-stack-gap);
    min-width: 0;
  }
  
  .nx-stack--tight {
    gap: var(--nx-space-2);
  }
  
  .nx-stack--loose {
    gap: var(--nx-space-5);
  }
  
  .nx-stack--xl {
    gap: var(--nx-space-8);
  }
  
  /* -----------------------------------------
     Panel
     ----------------------------------------- */
  .nx-panel {
    display: block;
    min-width: 0;
    border-radius: var(--nx-radius-md);
    padding: var(--nx-panel-padding);
  }
  
  .nx-panel--sm {
    padding: var(--nx-space-3);
    border-radius: var(--nx-radius-sm);
  }
  
  .nx-panel--lg {
    padding: var(--nx-space-6);
    border-radius: var(--nx-radius-lg);
  }
  
  .nx-panel--xl {
    padding: var(--nx-space-8);
    border-radius: var(--nx-radius-xl);
  }
  
  /* -----------------------------------------
     Card
     ----------------------------------------- */
  .nx-card {
    display: block;
    min-width: 0;
    border-radius: var(--nx-radius-md);
    padding: var(--nx-card-padding);
  }
  
  .nx-card--compact {
    padding: var(--nx-space-3);
    border-radius: var(--nx-radius-sm);
  }
  
  .nx-card--spacious {
    padding: var(--nx-space-6);
    border-radius: var(--nx-radius-lg);
  }
  
  .nx-card--hero {
    padding: var(--nx-space-8);
    border-radius: var(--nx-radius-xl);
  }
  
  /* -----------------------------------------
     Toolbar
     ----------------------------------------- */
  .nx-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-toolbar-gap);
    min-width: 0;
  }
  
  .nx-toolbar--start {
    justify-content: flex-start;
  }
  
  .nx-toolbar--center {
    justify-content: center;
  }
  
  .nx-toolbar--end {
    justify-content: flex-end;
  }
  
  .nx-toolbar--wrap {
    flex-wrap: wrap;
  }
  
  .nx-toolbar__group {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    min-width: 0;
  }
  
  .nx-toolbar__group--wrap {
    flex-wrap: wrap;
    display: flex;
    gap: var(--nx-space-3);
  }
  
  /* -----------------------------------------
     Utility alignment helpers for sprites
     ----------------------------------------- */
  .nx-align-start {
    align-items: flex-start;
  }
  
  .nx-align-center {
    align-items: center;
  }
  
  .nx-align-end {
    align-items: flex-end;
  }
  
  .nx-justify-start {
    justify-content: flex-start;
  }
  
  .nx-justify-center {
    justify-content: center;
  }
  
  .nx-justify-end {
    justify-content: flex-end;
  }
  
  .nx-justify-between {
    justify-content: space-between;
  }
  
  /* -----------------------------------------
     Responsive
     ----------------------------------------- */
  @media (max-width: 1024px) {
    .nx-grid--4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
    .nx-container {
      padding-left: var(--nx-space-3);
      padding-right: var(--nx-space-3);
    }
  }
  
  @media (max-width: 768px) {
    .nx-grid--2,
    .nx-grid--3,
    .nx-grid--4 {
      grid-template-columns: 1fr;
    }
  
    .nx-toolbar {
      flex-wrap: wrap;
    }
  }