@layer utility {
  /* === WIDTH === */
  .width-sm { max-width: 900px; margin-inline: auto; }
  .width-md { max-width: 1200px; margin-inline: auto; }
  .width-lg { max-width: 100%; }

  /* === ALIGNMENT === */
  [class*="align:start"] { align-items: flex-start; }
  [class*="align:end"] { align-items: flex-end; }
  [class*="align:center"] { align-items: center; }
  [class*="align:stretch"] { align-items: stretch; }
  [class*="align:baseline"] { align-items: baseline; }

  /* === JUSTIFY === */
  [class*="justify:start"] { justify-content: flex-start; }
  [class*="justify:end"] { justify-content: flex-end; }
  [class*="justify:center"] { justify-content: center; }
  [class*="justify:between"] { justify-content: space-between; }
  [class*="justify:around"] { justify-content: space-around; }
  [class*="justify:evenly"] { justify-content: space-evenly; }

  /* === SPACING UTILITIES === */
  [class*="p"], [class*="m"], [class*="g"] {
    /* Internal size variables (scoped to each utility type) */
    &[class*="p"][class*="-xs"] { --_p-size: var(--space-xs); }
    &[class*="p"][class*="-sm"] { --_p-size: var(--space-sm); }
    &[class*="p"][class*="-md"] { --_p-size: var(--space-md); }
    &[class*="p"][class*="-lg"] { --_p-size: var(--space-lg); }
    &[class*="p"][class*="-xl"] { --_p-size: var(--space-xl); }
    
    &[class*="m"][class*="-xs"] { --_m-size: var(--space-xs); }
    &[class*="m"][class*="-sm"] { --_m-size: var(--space-sm); }
    &[class*="m"][class*="-md"] { --_m-size: var(--space-md); }
    &[class*="m"][class*="-lg"] { --_m-size: var(--space-lg); }
    &[class*="m"][class*="-xl"] { --_m-size: var(--space-xl); }
    
    &[class*="g"][class*="-xs"] { --_g-size: var(--space-xs); }
    &[class*="g"][class*="-sm"] { --_g-size: var(--space-sm); }
    &[class*="g"][class*="-md"] { --_g-size: var(--space-md); }
    &[class*="g"][class*="-lg"] { --_g-size: var(--space-lg); }
    &[class*="g"][class*="-xl"] { --_g-size: var(--space-xl); }
    
    /* === PADDING === */
    &[class*="p-"] { padding: var(--_p-size); }
    &[class*="p:top-"] { padding-block-start: var(--_p-size); }
    &[class*="p:bot-"] { padding-block-end: var(--_p-size); }
    &[class*="p:lef-"] { padding-inline-start: var(--_p-size); }
    &[class*="p:rig-"] { padding-inline-end: var(--_p-size); }
    &[class*="p:inl-"] { padding-inline: var(--_p-size); }
    &[class*="p:blk-"] { padding-block: var(--_p-size); }
    
    /* === MARGIN === */
    &[class*="m-"] { margin: var(--_m-size); }
    &[class*="m:top-"] { margin-block-start: var(--_m-size); }
    &[class*="m:bot-"] { margin-block-end: var(--_m-size); }
    &[class*="m:lef-"] { margin-inline-start: var(--_m-size); }
    &[class*="m:rig-"] { margin-inline-end: var(--_m-size); }
    &[class*="m:inl-"] { margin-inline: var(--_m-size); }
    &[class*="m:blk-"] { margin-block: var(--_m-size); }
    
    /* === GAP === */
    &[class*="g-"] { gap: var(--_g-size); }
    
    /* === SIBLING MODIFIER === */
    &[class~="sib"] {
      padding: 0;
      margin: 0;
      
      & + & {
        &[class*="p-"] { padding: var(--_p-size); }
        &[class*="p:top-"] { padding-block-start: var(--_p-size); }
        &[class*="p:bot-"] { padding-block-end: var(--_p-size); }
        &[class*="p:lef-"] { padding-inline-start: var(--_p-size); }
        &[class*="p:rig-"] { padding-inline-end: var(--_p-size); }
        &[class*="p:inl-"] { padding-inline: var(--_p-size); }
        &[class*="p:blk-"] { padding-block: var(--_p-size); }
        
        &[class*="m-"] { margin: var(--_m-size); }
        &[class*="m:top-"] { margin-block-start: var(--_m-size); }
        &[class*="m:bot-"] { margin-block-end: var(--_m-size); }
        &[class*="m:lef-"] { margin-inline-start: var(--_m-size); }
        &[class*="m:rig-"] { margin-inline-end: var(--_m-size); }
        &[class*="m:inl-"] { margin-inline: var(--_m-size); }
        &[class*="m:blk-"] { margin-block: var(--_m-size); }
      }
    }
  }

  /* === TEXT === */
  [class~="text"], [class*="text:"], [class*="text-"] {
    /* Base - default color, medium size */
    color: var(--text);
    font-size: var(--text-md);
    
    /* Variants - colors */
    &[class*=":pri"] { color: var(--color-pri); }
    &[class*=":sec"] { color: var(--color-sec); }
    &[class*=":inf"] { color: var(--color-inf); }
    &[class*=":suc"] { color: var(--color-suc); }
    &[class*=":wrn"] { color: var(--color-wrn); }
    &[class*=":dgr"] { color: var(--color-dgr); }
    &[class*=":mut"] { color: var(--text-muted); }
    
    /* Size modifiers */
    &[class*="-xs"] { font-size: var(--text-xs); }
    &[class*="-sm"] { font-size: var(--text-sm); }
    &[class*="-md"] { font-size: var(--text-md); }
    &[class*="-lg"] { font-size: var(--text-lg); }
    &[class*="-xl"] { font-size: var(--text-xl); }
  }

  /* === SCROLL UTILITIES === */
  [class*="scroll-y"]  { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: none; }
  [class*="scroll-x"]  { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: none; }
  [class*="scroll-xy"] { overflow:   auto; -webkit-overflow-scrolling: touch; overscroll-behavior:   none; }
  [class*="scroll-no"] { overscroll-behavior: none; }

  /* Width using ch */
  .w\:sm   { width: 16ch; }
  .w\:md   { width: 24ch; }
  .w\:lg   { width: 32ch; }
  .w\:xl   { width: 40ch; }

  /* === PILL === */
  .pill { padding: var(--space-xs) var(--space-sm); border-radius: 999px; background: var(--surface-hover); }

/* === SURFACE (well system: auto-lightens toward content) === */
  .surface:not(:has(.surface)) { 
    background: color-mix(in oklch, var(--_surface-base), white 30%);
  }
  .surface:has(.surface) { 
    background: color-mix(in oklch, var(--_surface-base), var(--gry-2) 15%);
  }
  .surface:has(.surface .surface) { 
    background: color-mix(in oklch, var(--_surface-base), var(--gry-3) 20%);
  }

  :is(.vh) {inline-size: 0; block-size: 0; overflow: hidden;}
  
  /* === RESPONSIVE VISIBILITY === */
  @media (width > 768px) { .mobile { display: none !important; } }
  @media (width <= 768px) { .desktop { display: none !important; } }

  /* === SHADOW === */
  .shadow { box-shadow: var(--shadow-md); }
}